{"id":28250747,"url":"https://github.com/largonarco/medint_f","last_synced_at":"2025-06-20T06:04:50.727Z","repository":{"id":285014042,"uuid":"956804794","full_name":"Largonarco/MedInt_F","owner":"Largonarco","description":"Frontend for a Realtime Medical Interpreter ","archived":false,"fork":false,"pushed_at":"2025-04-01T00:41:57.000Z","size":196,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-19T14:21:19.442Z","etag":null,"topics":["nextjs","websocket"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Largonarco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-28T22:25:53.000Z","updated_at":"2025-04-12T23:54:26.000Z","dependencies_parsed_at":"2025-04-01T01:42:33.075Z","dependency_job_id":null,"html_url":"https://github.com/Largonarco/MedInt_F","commit_stats":null,"previous_names":["largonarco/sully_f","largonarco/medint_f"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Largonarco/MedInt_F","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Largonarco%2FMedInt_F","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Largonarco%2FMedInt_F/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Largonarco%2FMedInt_F/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Largonarco%2FMedInt_F/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Largonarco","download_url":"https://codeload.github.com/Largonarco/MedInt_F/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Largonarco%2FMedInt_F/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259745124,"owners_count":22905048,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","websocket"],"created_at":"2025-05-19T14:18:58.062Z","updated_at":"2025-06-14T01:31:30.970Z","avatar_url":"https://github.com/Largonarco.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MedInt - Frontend Client\n\nA Next.js-based frontend application for the Medical Interpreter API that facilitates real-time communication between Spanish-speaking patients and English-speaking doctors.\n\n## Overview\n\nThis frontend application provides a user-friendly interface for the Medical Interpreter API. It enables real-time audio recording, transmission, and playback, allowing seamless translation between Spanish and English during medical conversations.\n\n## Features\n\n- **Real-Time Audio Recording**: Capture audio input from the device microphone.\n- **WebSocket Integration**: Establish real-time bidirectional communication with the backend API.\n- **Dual-Language Display**: View translated conversations for both patient (Spanish) and doctor (English).\n- **Audio Playback**: Listen to translated messages using browser's speech synthesis.\n- **Conversation Summary**: Generate and display a summary of the medical conversation.\n- **Status Notifications**: Receive feedback through snackbar notifications for connection status and errors.\n- **Responsive Design**: Compatible with various device screen sizes.\n\n## Technologies Used\n\n- [Next.js](https://nextjs.org/) - React framework for the frontend application\n- [NextUI](https://nextui.org/) - UI component library\n- [notistack](https://iamhosseindhv.com/notistack) - Notification system\n- [React Icons](https://react-icons.github.io/react-icons/) - Icon library\n- WebSocket API - For real-time communication\n- Web Audio API - For audio processing and playback\n- MediaRecorder API - For capturing audio from the microphone\n\n## Prerequisites\n\n- Node.js 16.x or higher\n- npm or yarn\n- Backend Medical Interpreter API service running (see separate README)\n\n## Installation\n\n1. **Clone the Repository**\n\n```bash\ngit clone https://github.com/Largonarco/MedInt_F.git\ncd MedInt_F\n```\n\n2. **Install Dependencies**\n\n```bash\nnpm install\n# or\nyarn install\n```\n\n3. **Configure Environment**\n   Create a `.env.local` file in the root directory:\n\n```\nNEXT_PUBLIC_WEBSOCKET_URL=ws://localhost:8000/ws\n```\n\n## Running the Application\n\n1. **Start the Development Server**\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\n2. **Access the Application**\n   Open your browser and navigate to:\n\n```\nhttp://localhost:3000\n```\n\n## Usage Instructions\n\n1. **Start a Session**:\n\n   - Ensure the backend API is running.\n   - The status indicator at the top will show \"Connected\" when ready.\n\n2. **Record Audio**:\n\n   - Click \"Start Recording\" to begin capturing audio.\n   - Speak in either Spanish or English.\n   - Click \"Stop Recording\" to end the capture and process the translation.\n\n3. **View Translations**:\n\n   - Patient (Spanish) messages will appear in the left panel.\n   - Doctor (English) messages will appear in the right panel.\n\n4. **Playback Audio**:\n\n   - Click on any message to hear it spoken using text-to-speech.\n\n5. **Get a Summary**:\n   - Click \"Summarize conversation\" to generate a concise summary of the medical conversation.\n\n## Project Structure\n\n```\nMedInt_F/\n├── app/                  # Next.js application directory\n│   ├── page.js           # Main application component\n│   ├── layout.tsx        # Root layout component\n│   ├── globals.css       # Global styles\n│   └── utils/            # Utility functions\n│       └── sound.js      # Audio processing utilities\n├── public/               # Static files\n├── .env.local            # Environment variables\n└── README.md             # This file\n```\n\n## Audio Processing\n\nThe application handles audio processing in the following ways:\n\n- Records audio at 24kHz sample rate with 16-bit depth for optimal compatibility with the backend API.\n- Converts raw audio data to base64-encoded PCM format for transmission over WebSockets.\n- Processes incoming audio deltas, combines them, and plays them back using the Web Audio API.\n\n## Related Projects\n\n- [Medical Interpreter API](https://github.com/yourusername/medical-interpreter-api) - The backend service that powers this application.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flargonarco%2Fmedint_f","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flargonarco%2Fmedint_f","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flargonarco%2Fmedint_f/lists"}