PROJECT OVERVIEW:
The application, tentatively named 'Mikroskopik Görüntüleyicim' (Microscopic Viewer), aims to revolutionize how researchers and scientists interact with microscopic video data, specifically that captured on LaserDiscs. The core problem addressed is the inaccessibility and difficulty of analyzing legacy microscopic video formats stored on physical media like LaserDiscs. This tool provides a bridge between outdated data storage methods and modern data analysis techniques. By enabling users to upload, process, and analyze microscopic video footage, the platform unlocks valuable insights previously locked away. The primary value proposition is to make legacy microscopic data accessible, analyzable, and actionable, thereby accelerating scientific discovery and improving educational resources in fields like biology, medicine, and material science.
TECH STACK:
- Frontend Framework: React (using Create React App or Vite for a streamlined setup)
- Styling: Tailwind CSS for rapid, utility-first styling and responsive design.
- State Management: Zustand for efficient and simple global state management.
- Routing: React Router DOM for client-side navigation.
- UI Components: Headless UI for accessible and unstyled components.
- Video Playback: Video.js or a similar robust library for handling video loading and playback, potentially with custom controls for frame-by-frame scrubbing.
- Charting Library: Chart.js or Recharts for data visualization.
- Icons: Heroicons for clean, scalable vector icons.
- Form Handling: React Hook Form with Zod for validation.
- Deployment: Vercel or Netlify for easy deployment and CI/CD.
CORE FEATURES & USER FLOWS:
1. **LaserDisc Video Upload & Processing:**
* User Flow: User navigates to the 'Upload' section. Clicks 'Select File' or drags and drops a video file (simulating LaserDisc capture, e.g., .mp4, .avi). The system processes the video, potentially extracting frames if necessary, and stores it associated with a new project. Loading indicators are shown during upload and processing.
* Details: Initially, we'll simulate LaserDisc by accepting standard video formats. Future iterations could involve custom ingest pipelines for actual LaserDisc data if feasible. The system should handle large file uploads efficiently.
2. **Basic Image/Video Analysis Tools:**
* User Flow: After uploading, the user selects a video/frame and goes to the 'Analysis' tab. They can adjust sliders for Brightness, Contrast, and apply predefined filters (e.g., Grayscale, Edge Detection). Changes are reflected in real-time on the displayed image/video frame.
* Details: Implement image manipulation libraries (e.g., `react-image-processing` or similar logic using Canvas API) for adjustments. Filters should be applied client-side where possible for performance.
3. **Temporal Analysis (e.g., Growth Rate Estimation):**
* User Flow: User selects a sequence of frames or a video. They define a Region of Interest (ROI) using a bounding box tool. The system analyzes the selected ROI across frames, calculating metrics like changes in area, intensity, or position over time. Results are presented numerically or as a simple time-series plot.
* Details: This involves frame differencing, object tracking (simple centroid tracking initially), and statistical calculation. Requires careful state management to track ROIs and analysis parameters.
4. **Data Visualization & Reporting:**
* User Flow: Analysis results (from feature 3) are automatically plotted using a charting library. Users can customize the plot type (line, scatter), add labels, and export the chart as an image (PNG/SVG) or data as CSV. A simple report generation feature compiles the analysis steps, results, and visualizations into a downloadable document (PDF).
* Details: Integrate Chart.js to render plots dynamically based on analysis results. PDF generation might use libraries like `jsPDF`.
5. **User Accounts & Project Management:**
* User Flow: Users sign up/log in. They can create, name, and organize their uploaded videos and analyses into distinct projects. A dashboard lists all projects, allowing users to view, edit, or delete them.
* Details: Utilizes Zustand for managing user authentication state and project data. LocalStorage can be used for a simpler MVP, with a roadmap for backend integration.
UI/UX DESIGN:
- **Layout:** Single Page Application (SPA) with a persistent sidebar for navigation (Projects, Upload, Analysis, Reports) and a main content area. A top navigation bar for user authentication and account settings. Mobile-first, responsive design adapting to various screen sizes.
- **Color Palette:** Primary: Deep Blue (#1E3A8A) for a professional, scientific feel. Secondary: Teal (#14B8A6) for interactive elements and highlights. Accent: Light Gray (#F3F4F6) for backgrounds, Dark Gray (#374151) for text. White (#FFFFFF) for cards and clean spaces. Error: Red (#EF4444).
- **Typography:** Sans-serif fonts like Inter or Poppins for readability. Clear hierarchy using font weights and sizes (e.g., H1, H2, body, captions).
- **Components:** Clean, minimalistic design. Emphasis on clarity and usability. Use of cards for organizing information, clear buttons, intuitive sliders, and interactive plots.
- **Responsiveness:** Sidebar collapses into a hamburger menu on smaller screens. Main content reflows. Image/video viewers and plots are designed to be fully responsive.
COMPONENT BREAKDOWN:
- `App.jsx`: Main application component, sets up routing and global layout.
- `Header.jsx`: Top navigation bar (Logo, User Auth links, Account menu).
- `Sidebar.jsx`: Navigation menu (Projects, Upload, Analysis, Reports links). Collapsible.
- `HomePage.jsx`: Dashboard displaying user projects.
- `ProjectCard.jsx`: Displays a single project summary (Name, Date, Actions). Props: `projectName`, `projectDate`, `onSelect`, `onDelete`.
- `UploadPage.jsx`: Handles file uploads with drag-and-drop support and progress indicators.
- `AnalysisPage.jsx`: Main analysis interface. Includes video player/frame viewer, tool controls, and visualization area.
- `VideoPlayer.jsx`: Component for playing uploaded videos, frame scrubbing. Props: `videoSrc`, `onFrameSelect`.
- `ImageTools.jsx`: Controls for brightness, contrast, filters. Props: `onAdjust`, `onFilter`.
- `ROITool.jsx`: Component for defining Regions of Interest on images/frames. Props: `imageUrl`, `onROISet`.
- `TemporalAnalysisRunner.jsx`: Logic to perform analysis on frame sequences.
- `ChartView.jsx`: Renders charts using Chart.js. Props: `chartData`, `chartOptions`, `chartType`.
- `ReportGenerator.jsx`: Component to generate and download reports.
- `Auth.jsx`: Authentication forms (Login, Signup).
- `Modal.jsx`: Generic modal component for confirmations or pop-ups.
DATA MODEL (Zustand Store & Mock Data):
- `useStore.js` (Zustand):
* `user`: { id, name, email }
* `projects`: Array of project objects [{ id, name, createdAt, videos: [...] }]
* `currentProject`: Object (currently selected project)
* `videos`: Array of video objects [{ id, projectId, name, src, processedFrames: [...] }]
* `currentVideo`: Object (currently selected video)
* `analysisResults`: Object { videoId, roi, temporalData: [{ frame, value }], chartConfig }
* `ui`: { isLoading, error, showModal }
- **Mock Data Format (`sampleData.js`):**
* Project: `{ "id": "proj_123", "name": "Cell Division Study", "createdAt": "2023-10-27T10:00:00Z" }`
* Video: `{ "id": "vid_abc", "projectId": "proj_123", "name": "Growth Phase 1", "src": "/path/to/video.mp4", "thumbnail": "/path/to/thumb.jpg", "duration": 120, "framesExtracted": true }`
* AnalysisResult: `{ "videoId": "vid_abc", "roi": { "x": 100, "y": 150, "width": 50, "height": 60 }, "temporalData": [ { "frame": 10, "timestamp": 0.5, "metricValue": 15.2 }, { "frame": 20, "timestamp": 1.0, "metricValue": 16.1 } ], "chartConfig": { "type": "line", "title": "Cell Area Over Time" } }`
ANIMATIONS & INTERACTIONS:
- **Hover Effects:** Subtle background color changes or slight scaling on buttons and interactive elements.
- **Transitions:** Smooth transitions for sidebar collapse/expand, modal pop-ups, and route changes using `Framer Motion` or CSS transitions.
- **Loading States:** Skeleton loaders or spinners for data fetching and processing. Progress bars for uploads and long-running analyses.
- **Micro-interactions:** Visual feedback on button clicks, slider adjustments, and successful data saving.
- **Video Controls:** Smooth scrubbing through video frames, clear play/pause/stop indicators.
EDGE CASES:
- **Empty States:** Display informative messages and clear calls-to-action when there are no projects, no videos, or no analysis results (e.g., 'No projects yet. Create your first project!').
- **Error Handling:** Graceful handling of file upload errors, processing failures, network issues. Display user-friendly error messages and logs. Implement try-catch blocks extensively.
- **Validation:** Client-side validation (using Zod with React Hook Form) for forms (project names, login credentials). Server-side validation would be added in a full backend implementation.
- **Accessibility (a11y):** Semantic HTML, ARIA attributes where necessary, keyboard navigation support, sufficient color contrast, focus management, alt text for images.
- **Large Files:** Strategies for handling large video uploads (chunking, background processing, clear progress feedback).
- **Browser Compatibility:** Test across major browsers (Chrome, Firefox, Safari).
SAMPLE DATA:
1. **Project:** `{ "id": "proj_laser_001", "name": "Yeast Cell Growth", "createdAt": "2023-10-26T09:00:00Z" }`
2. **Video:** `{ "id": "vid_yeast_a", "projectId": "proj_laser_001", "name": "Initial Growth Phase", "src": "/mock_videos/yeast_growth_1.mp4", "thumbnail": "/mock_images/yeast_growth_1_thumb.jpg", "duration": 95, "framesExtracted": true }`
3. **Analysis Result (Temporal):** `{ "videoId": "vid_yeast_a", "roi": { "x": 210, "y": 180, "width": 75, "height": 75 }, "temporalData": [ { "frame": 5, "timestamp": 0.2, "metricValue": 45.5 }, { "frame": 15, "timestamp": 0.6, "metricValue": 48.2 }, { "frame": 25, "timestamp": 1.0, "metricValue": 51.0 } ], "chartConfig": { "type": "line", "title": "Yeast Cell Area" } }`
4. **Video (different project):** `{ "id": "vid_mat_b", "projectId": "proj_mat_002", "name": "Material Stress Test", "src": "/mock_videos/material_stress.avi", "thumbnail": "/mock_images/material_stress_thumb.jpg", "duration": 240, "framesExtracted": false }`
5. **Analysis Result (Simple Stats):** `{ "videoId": "vid_mat_b", "roi": { "x": 50, "y": 50, "width": 100, "height": 100 }, "temporalData": [ { "frame": 0, "timestamp": 0.0, "avgIntensity": 120, "stdDevIntensity": 15 }, { "frame": 100, "timestamp": 4.0, "avgIntensity": 135, "stdDevIntensity": 18 } ], "chartConfig": { "type": "scatter", "title": "Intensity Change" } }`
6. **Empty Project List:** `[]`
7. **Video with no analysis:** `{ "id": "vid_empty_analysis", "projectId": "proj_laser_001", "name": "Control Group", "src": "/mock_videos/control.mp4", "thumbnail": "/mock_images/control_thumb.jpg", "duration": 60, "framesExtracted": true }`
DEPLOYMENT NOTES:
- **Build:** Use `npm run build` or `yarn build` command. The output will be in a `dist` or `build` folder.
- **Environment Variables:** Use `.env` files for configuration. Key variables: `NODE_ENV` (development/production), `API_BASE_URL` (if backend is integrated later), `STRIPE_PUBLIC_KEY` (for potential future payments).
- **Performance Optimizations:** Code splitting with React.lazy and Suspense for faster initial load. Image optimization for thumbnails. Memoization of expensive calculations. Efficient state management.
- **HTTPS:** Ensure deployment uses HTTPS. Vercel/Netlify handle this automatically.
- **Routing:** Configure static file serving or specific routing rules for SPAs on the hosting platform (e.g., Netlify's `_redirects` or Vercel's `vercel.json`).