PROJECT OVERVIEW:
The application, named 'Gerçeklik Filtresi' (Reality Filter), aims to combat the growing problem of AI-generated misinformation, propaganda, and manipulation. In an era where deepfakes and sophisticated AI content generation are becoming increasingly accessible, users need tools to discern truth from falsehood. This platform will act as a 'reality filter' by analyzing text, images, and videos for potential deceptions, biases, and manipulative tactics. The core value proposition is to empower users with objective insights, enhance digital literacy, and foster a more trustworthy online information ecosystem.
TECH STACK:
- Frontend: React (using Vite for fast development)
- Styling: Tailwind CSS for rapid UI development and consistency
- State Management: Zustand for efficient global state management
- Routing: React Router DOM
- API Calls: Axios or Fetch API
- Libraries: `react-beautiful-dnd` for potential future drag-and-drop features, `react-icons` for UI icons, libraries for image/video processing (e.g., `react-dropzone`, potentially server-side processing for heavier tasks).
- Potential Backend/AI Integration: Placeholder for future integration with Python-based AI/ML models (e.g., for text analysis, deepfake detection). Initially, mock data and simple heuristics will be used for MVP.
CORE FEATURES:
1. **Text Misinformation Analysis:**
* **User Flow:** User navigates to the 'Text Analysis' section, enters a URL or pastes text into a provided input area. Clicks 'Analyze'. A loading indicator is shown. Upon completion, a detailed analysis report is displayed, including a 'Reliability Score' and breakdown of detected patterns (e.g., emotional manipulation, logical fallacies, known propaganda techniques).
* **Details:** Input field for URL or text. Analysis triggers a simulated process. Results include a score (e.g., 0-100), confidence level, and categorized findings.
2. **Basic Visual/Video Deception Detection:**
* **User Flow:** User navigates to the 'Media Analysis' section. Uploads an image file or provides a video URL. Clicks 'Analyze'. Loading indicator appears. Results show basic checks: metadata integrity, potential inconsistencies, comparison against known deepfake signatures (simulated for MVP).
* **Details:** File upload component (`react-dropzone`) for images. Input field for video URLs. MVP focuses on metadata analysis and heuristic checks rather than full-blown AI detection.
3. **Reliability Score & Reporting:**
* **User Flow:** This is the output of Feature 1 & 2. A clear, prominent score is displayed. A collapsible section or modal provides a detailed breakdown of the analysis, explaining the factors contributing to the score (e.g., 'High emotional language detected', 'Inconsistent lighting in image', 'Source has a history of misinformation').
* **Details:** Visual representation of the score (e.g., gauge chart, percentage). Categorized list of findings with explanations.
4. **User Feedback Mechanism:**
* **User Flow:** On the results page for any analysis, users can find a button/link like 'Report Issue' or 'Provide Feedback'. Clicking this opens a small form or modal allowing users to comment on the accuracy of the analysis, provide additional context, or report new patterns.
* **Details:** Simple form with text area for feedback. Submitted feedback is logged (initially in mock storage).
UI/UX DESIGN:
- **Layout:** Single Page Application (SPA) layout. A clear navigation bar (left or top) for switching between sections (Text Analysis, Media Analysis, About, Feedback). Main content area displays the active feature's UI. Clean, modern aesthetic.
- **Color Palette:** Primary: Deep Blue (#1E3A8A) for trust and stability. Secondary: Teal (#14B8A6) for insights and clarity. Accent: Orange (#F97316) for warnings or important calls to action. Neutral: Shades of gray (#F3F4F6, #6B7280, #1F2937) for backgrounds, text, and borders. White (#FFFFFF) for cards and content backgrounds.
- **Typography:** Sans-serif fonts like Inter or Inter UI for readability. Clear hierarchy using font sizes and weights (e.g., H1, H2, body text, captions).
- **Responsive Design:** Mobile-first approach. Utilizes Tailwind CSS's responsive prefixes (sm:, md:, lg:). Navigation collapses into a hamburger menu on smaller screens. Content sections adjust layout for optimal viewing on all devices.
- **Visual Elements:** Use of clean icons, subtle animations, and clear data visualizations (charts for scores, lists for findings).
COMPONENT BREAKDOWN:
- `App.js`: Main application component, sets up routing.
- `Navigation.js`: Sidebar or top navigation bar. Receives `activeSection` prop, renders links, handles clicks.
- `HomePage.js`: Landing page, brief introduction to the app's purpose.
- `TextAnalysis.js`: Contains input field (URL/Text), submit button, and displays analysis results or loading state.
* `TextInput.js`: Handles URL input and text area, manages its local state.
* `AnalysisButton.js`: Submit button component.
* `LoadingSpinner.js`: Displays a spinner/animation during analysis.
* `AnalysisResults.js`: Component to display the results, including score and detailed findings.
* `ReliabilityScore.js`: Displays the main score visually.
* `FindingsList.js`: Renders a list of detected patterns/issues.
- `MediaAnalysis.js`: Contains file upload/URL input for media, submit button, and displays results.
* `MediaInput.js`: Handles file uploads (`react-dropzone`) and URL input.
* `AnalysisButton.js`: (Shared or similar) Submit button.
* `LoadingSpinner.js`: (Shared) Loading indicator.
* `MediaAnalysisResults.js`: Displays media analysis results.
- `Feedback.js`: Form for user feedback submission.
* `FeedbackForm.js`: Contains the feedback input fields and submit button.
- `Footer.js`: Standard footer with copyright and links.
DATA MODEL:
- **State Structure (Zustand example):**
```javascript
// store.js
import { create } from 'zustand';
const useStore = create((set) => ({
// Text Analysis State
textInput: '',
isAnalyzingText: false,
textAnalysisResult: null, // { score: number, findings: Array<{ type: string, description: string, confidence: number }> }
setTextInput: (value) => set({ textInput: value }),
setIsAnalyzingText: (value) => set({ isAnalyzingText: value }),
setTextAnalysisResult: (result) => set({ textAnalysisResult: result }),
// Media Analysis State
mediaInput: '', // URL or file object
isAnalyzingMedia: false,
mediaAnalysisResult: null, // { score: number, findings: Array<{ type: string, description: string, confidence: number }> }
setMediaInput: (value) => set({ mediaInput: value }),
setIsAnalyzingMedia: (value) => set({ isAnalyzingMedia: value }),
setMediaAnalysisResult: (result) => set({ mediaAnalysisResult: result }),
// Feedback State
feedbackText: '',
setFeedbackText: (value) => set({ feedbackText: value }),
submitFeedback: async () => {
// Simulate API call
console.log('Submitting feedback:', get().feedbackText);
await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate network delay
set({ feedbackText: '' }); // Clear feedback after submission
alert('Feedback submitted!');
}
}));
export default useStore;
```
- **Mock Data Format:**
```javascript
// Example Text Analysis Result
{
score: 75, // Out of 100
confidence: 0.85, // Overall confidence in the score
findings: [
{ type: 'Emotional Manipulation', description: 'Uses highly charged language to provoke a strong emotional response.', confidence: 0.9, severity: 'High' },
{ type: 'Logical Fallacy', description: 'Contains an ad hominem attack.', confidence: 0.7, severity: 'Medium' },
{ type: 'Source Reliability', description: 'Source has been flagged for potential bias in the past.', confidence: 0.6, severity: 'Medium' }
]
}
// Example Media Analysis Result
{
score: 60,
confidence: 0.7,
findings: [
{ type: 'Metadata Anomaly', description: 'Image EXIF data is missing or inconsistent.', confidence: 0.8, severity: 'Low' },
{ type: 'Visual Inconsistency', description: 'Slight discrepancies in lighting between subject and background detected.', confidence: 0.6, severity: 'Medium' },
{ type: 'Known Deepfake Signature', description: 'Partial match found with a known deepfake generation model.', confidence: 0.5, severity: 'High' }
]
}
```
ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Subtle fade-in/fade-out between major sections using React Transition Group or Framer Motion (if complexity allows).
- **Button Hovers:** Slight scale-up or background color change on button hover states.
- **Input Focus:** Border highlight or subtle shadow effect when input fields are focused.
- **Loading States:** Smoothly animated `LoadingSpinner.js` component displayed while analysis is in progress. The spinner could be a simple rotating element or a more stylized graphic.
- **Result Expansion:** Findings lists can use a subtle expand/collapse animation for details.
- **Micro-interactions:** Small visual cues on successful form submission or input validation.
EDGE CASES:
- **Empty States:** When no analysis has been performed, result sections should display informative messages (e.g., 'Enter a URL or paste text to begin analysis.').
- **Error Handling:** Network errors during analysis (display user-friendly message, e.g., 'Analysis failed. Please try again later.'). Invalid URL/file input (validation messages near the input fields).
- **Validation:** URL format validation. File type and size validation for uploads.
- **Accessibility (a11y):** Use semantic HTML5 elements. Ensure proper ARIA attributes for interactive elements and regions. Keyboard navigability for all interactive components. Sufficient color contrast.
- **Long Content:** For very long text inputs, implement character count limits or indicate processing time expectations.
- **No Results:** If analysis yields no significant findings, display a message like 'No significant misinformation patterns detected. Proceed with caution.' rather than just a zero score.
SAMPLE DATA (Mock Data for demonstrating UI/Logic):
1. **Text Analysis - High Risk:**
```json
{
"score": 25,
"confidence": 0.92,
"findings": [
{ "type": "Propaganda Technique", "description": "Uses 'us vs. them' framing to incite division.", "confidence": 0.95, "severity": "High" },
{ "type": "Emotional Manipulation", "description": "Relies heavily on fear-mongering and sensationalism.", "confidence": 0.9, "severity": "High" },
{ "type": "Lack of Evidence", "description": "Claims are made without supporting data or sources.", "confidence": 0.85, "severity": "Medium" }
]
}
```
2. **Text Analysis - Medium Risk:**
```json
{
"score": 65,
"confidence": 0.75,
"findings": [
{ "type": "Potential Bias", "description": "Language suggests a strong leaning towards one perspective.", "confidence": 0.7, "severity": "Medium" },
{ "type": "Vague Language", "description": "Uses ambiguous terms that could be interpreted in multiple ways.", "confidence": 0.65, "severity": "Low" },
{ "type": "Source Reliability", "description": "Source is known for opinion pieces rather than factual reporting.", "confidence": 0.6, "severity": "Medium" }
]
}
```
3. **Text Analysis - Low Risk:**
```json
{
"score": 88,
"confidence": 0.88,
"findings": [
{ "type": "Factual Reporting", "description": "Content appears to be based on verifiable facts and data.", "confidence": 0.8, "severity": "Low" },
{ "type": "Balanced Perspective", "description": "Presents multiple viewpoints on the issue.", "confidence": 0.7, "severity": "Low" }
]
}
```
4. **Media Analysis - High Risk (Deepfake Indicator):**
```json
{
"score": 30,
"confidence": 0.70,
"findings": [
{ "type": "Known Deepfake Signature", "description": "Image contains artifacts consistent with generative adversarial networks (GANs).", "confidence": 0.75, "severity": "High" },
{ "type": "Facial Inconsistency", "description": "Asymmetrical blinking patterns detected in video frames.", "confidence": 0.65, "severity": "High" },
{ "type": "Metadata Anomaly", "description": "Creation date is inconsistent with expected camera model.", "confidence": 0.8, "severity": "Medium" }
]
}
```
5. **Media Analysis - Medium Risk (Manipulation):**
```json
{
"score": 55,
"confidence": 0.60,
"findings": [
{ "type": "Lighting Inconsistency", "description": "Significant difference in light source direction between foreground and background.", "confidence": 0.7, "severity": "Medium" },
{ "type": "Object Artifacts", "description": "Minor blurring or warping around manipulated objects.", "confidence": 0.55, "severity": "Low" },
{ "type": "Metadata Integrity", "description": "EXIF data present but contains unusual values.", "confidence": 0.6, "severity": "Low" }
]
}
```
6. **Media Analysis - Low Risk (Authentic):**
```json
{
"score": 92,
"confidence": 0.90,
"findings": [
{ "type": "Metadata Consistent", "description": "EXIF data appears standard and consistent with device information.", "confidence": 0.9, "severity": "Low" },
{ "type": "No Visual Artifacts", "description": "No obvious signs of digital manipulation or deepfake generation detected.", "confidence": 0.85, "severity": "Low" }
]
}
```
DEPLOYMENT NOTES:
- **Build Tool:** Vite is recommended for its speed. Production build command: `npm run build`.
- **Environment Variables:** Use `.env` files for API keys (if backend is integrated), configuration settings. Prefix variables with `VITE_` for Vite.
- **Performance Optimizations:** Code splitting (handled by Vite/React Router), lazy loading components, image optimization (using formats like WebP, responsive images), memoization (`React.memo`, `useMemo`, `useCallback`).
- **Hosting:** Static site hosting platforms like Vercel, Netlify, or GitHub Pages are suitable for the frontend. For backend AI processing, a separate server/cloud function setup would be required.
- **API Integration Strategy:** Initially, mock API calls using `setTimeout` to simulate network latency. Later, replace with actual API calls to a backend service.
- **Error Monitoring:** Integrate a service like Sentry for real-time error tracking in production.