{"_id":"@dwack1234/arabic-voice-to-text-nextjs","_rev":"2-dad8dd92912902b8361e9ad3904de1ce","name":"@dwack1234/arabic-voice-to-text-nextjs","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@dwack1234/arabic-voice-to-text-nextjs","version":"1.0.0","keywords":["arabic","voice-to-text","speech-to-text","stt","asr","nextjs","react","typescript","egyptian-arabic","voice-recognition","audio-recording","transcription"],"author":{"name":"d-wack"},"license":"MIT","_id":"@dwack1234/arabic-voice-to-text-nextjs@1.0.0","maintainers":[{"name":"dwack1234","email":"brandonpaulbailey@gmail.com"}],"homepage":"https://github.com/d-wack/arabic-voice-to-text-nextjs#readme","bugs":{"url":"https://github.com/d-wack/arabic-voice-to-text-nextjs/issues"},"dist":{"shasum":"e4c786ef141ac7ce37d001126cf58c41b781fc4c","tarball":"https://registry.npmjs.org/@dwack1234/arabic-voice-to-text-nextjs/-/arabic-voice-to-text-nextjs-1.0.0.tgz","fileCount":43,"integrity":"sha512-a8VKNjdmI7dNub7A2w8XXJ7bIZaIxhTs/GNJF+0mUoPegHkEUv6+XNSC95Db5frFL6V9xe/iiPJQxyErlDPsAQ==","signatures":[{"sig":"MEUCIQDYkTZ2fqKwrLGcfsZBtl4yIuM7MbHZ+fLNNKjUNHcLbAIgTQkseaMWzE3LI991TNjvQUXkuBVslbze8IjBvp3Yji4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":141581},"main":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.js"},"./styles":"./dist/styles.css","./sounds/*":"./sounds/*"},"gitHead":"a3a25e7bf8fd47f26013e728226a0c6f4b5b9ad6","scripts":{"dev":"next dev","lint":"eslint","test":"jest","build":"next build","start":"next start","build:ts":"tsc --project tsconfig.build.json && tsc-alias -p tsconfig.build.json","build:css":"node scripts/build-css.js","test:watch":"jest --watch","build:sounds":"mkdir -p sounds && cp src/assets/sounds/*.ogg sounds/ 2>/dev/null || true","build:package":"npm run build:ts && npm run build:css && npm run build:sounds","test:coverage":"jest --coverage","prepublishOnly":"npm run test && npm run build:package"},"_npmUser":{"name":"dwack1234","email":"brandonpaulbailey@gmail.com"},"repository":{"url":"git+https://github.com/d-wack/arabic-voice-to-text-nextjs.git","type":"git"},"_npmVersion":"10.9.4","description":"A full-featured Arabic voice-to-text component for Next.js and React applications with Egyptian Arabic STS API integration","directories":{},"_nodeVersion":"22.21.0","dependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^30.2.0","next":"16.0.0","eslint":"^9","tsc-alias":"^1.8.16","typescript":"^5","@types/jest":"^30.0.0","@types/node":"^20","tailwindcss":"^4","@types/react":"^19","@types/react-dom":"^19","eslint-config-next":"16.0.0","@tailwindcss/postcss":"^4","@testing-library/react":"^16.3.0","jest-environment-jsdom":"^30.2.0","@testing-library/jest-dom":"^6.9.1","@testing-library/user-event":"^14.6.1"},"peerDependencies":{"next":"^14.0.0 || ^15.0.0 || ^16.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"next":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/arabic-voice-to-text-nextjs_1.0.0_1761675260745_0.3471560192335923","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@dwack1234/arabic-voice-to-text-nextjs","version":"1.0.1","description":"A full-featured Arabic voice-to-text component for Next.js and React applications with Egyptian Arabic STS API integration","main":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.js"},"./styles":"./dist/package.css","./sounds/*":"./sounds/*"},"keywords":["arabic","voice-to-text","speech-to-text","stt","asr","nextjs","react","typescript","egyptian-arabic","voice-recognition","audio-recording","transcription"],"author":{"name":"d-wack"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/d-wack/arabic-voice-to-text-nextjs.git"},"bugs":{"url":"https://github.com/d-wack/arabic-voice-to-text-nextjs/issues"},"homepage":"https://github.com/d-wack/arabic-voice-to-text-nextjs#readme","peerDependencies":{"next":"^14.0.0 || ^15.0.0 || ^16.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"next":{"optional":true}},"scripts":{"dev":"next dev","build":"next build","build:package":"npm run build:ts && npm run build:css && npm run build:sounds","build:ts":"tsc --project tsconfig.build.json && tsc-alias -p tsconfig.build.json","build:css":"node scripts/build-css.js","build:sounds":"mkdir -p sounds && cp src/assets/sounds/*.ogg sounds/ 2>/dev/null || true","start":"next start","lint":"eslint","test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage","prepublishOnly":"npm run test && npm run build:package"},"dependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"devDependencies":{"@tailwindcss/postcss":"^4","@testing-library/jest-dom":"^6.9.1","@testing-library/react":"^16.3.0","@testing-library/user-event":"^14.6.1","@types/jest":"^30.0.0","@types/node":"^20","@types/react":"^19","@types/react-dom":"^19","eslint":"^9","eslint-config-next":"16.0.0","jest":"^30.2.0","jest-environment-jsdom":"^30.2.0","next":"16.0.0","tailwindcss":"^4","tsc-alias":"^1.8.16","typescript":"^5"},"_id":"@dwack1234/arabic-voice-to-text-nextjs@1.0.1","gitHead":"a3a25e7bf8fd47f26013e728226a0c6f4b5b9ad6","_nodeVersion":"22.21.0","_npmVersion":"10.9.4","dist":{"integrity":"sha512-F1GLs1ORxDSTpfghF2YaLo1A1CF0rqf6TrMDTT/mfyjA4+jy+Y/lGjqdy5+KO+BpS+TG8sZA5hDZFSreZQFusw==","shasum":"b23bef3e59faa0900f068d0eee2b6320a8e8363a","tarball":"https://registry.npmjs.org/@dwack1234/arabic-voice-to-text-nextjs/-/arabic-voice-to-text-nextjs-1.0.1.tgz","fileCount":43,"unpackedSize":141582,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCsz1VHnY+nFr0DdgeAvUU7hS3qWbNoLAe2NM58MzrMTgIgeVWhE/royN7E0xlo+hgaQYapB6mFh95APiTmNp5tSlo="}]},"_npmUser":{"name":"dwack1234","email":"brandonpaulbailey@gmail.com"},"directories":{},"maintainers":[{"name":"dwack1234","email":"brandonpaulbailey@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/arabic-voice-to-text-nextjs_1.0.1_1761675479501_0.8455531792344737"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-28T18:14:20.660Z","modified":"2025-10-28T18:17:59.888Z","1.0.0":"2025-10-28T18:14:20.952Z","1.0.1":"2025-10-28T18:17:59.695Z"},"bugs":{"url":"https://github.com/d-wack/arabic-voice-to-text-nextjs/issues"},"author":{"name":"d-wack"},"license":"MIT","homepage":"https://github.com/d-wack/arabic-voice-to-text-nextjs#readme","keywords":["arabic","voice-to-text","speech-to-text","stt","asr","nextjs","react","typescript","egyptian-arabic","voice-recognition","audio-recording","transcription"],"repository":{"type":"git","url":"git+https://github.com/d-wack/arabic-voice-to-text-nextjs.git"},"description":"A full-featured Arabic voice-to-text component for Next.js and React applications with Egyptian Arabic STS API integration","maintainers":[{"name":"dwack1234","email":"brandonpaulbailey@gmail.com"}],"readme":"# @dwack1234/arabic-voice-to-text-nextjs\n\n🎤 **Egyptian Arabic Speech-to-Text Component** for React and Next.js applications.\n\nA production-ready, customizable voice-to-text component that integrates with Egyptian Arabic STS (Speech-to-Text) API. Record audio directly from your browser and get high-quality Arabic transcriptions in real-time.\n\n[![NPM Version](https://img.shields.io/npm/v/@dwack1234/arabic-voice-to-text-nextjs)](https://www.npmjs.com/package/@dwack1234/arabic-voice-to-text-nextjs)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue)](https://www.typescriptlang.org/)\n\n## ✨ Features\n\n- 🎙️ **Browser Audio Recording** - MediaRecorder API integration with pause/resume\n- 🇪🇬 **Egyptian Arabic STS** - Optimized for Egyptian Arabic dialect\n- ⚡ **Two Processing Methods** - Pipeline (chunked) or Direct processing\n- 🎨 **Fully Customizable** - Control appearance, behavior, and callbacks\n- 📱 **Responsive Design** - Works on desktop and mobile browsers\n- 🔧 **TypeScript First** - Full type safety and IntelliSense support\n- ⚙️ **Flexible Integration** - Standalone or integrated into forms\n- 🎯 **Comprehensive Callbacks** - Track every stage of recording and transcription\n\n## 📦 Installation\n\n```bash\nnpm install @dwack1234/arabic-voice-to-text-nextjs\n```\n\n```bash\nyarn add @dwack1234/arabic-voice-to-text-nextjs\n```\n\n```bash\npnpm add @dwack1234/arabic-voice-to-text-nextjs\n```\n\n## 🚀 Quick Start\n\n```tsx\n'use client';\n\nimport { ArabicVoiceToText } from '@dwack1234/arabic-voice-to-text-nextjs';\nimport '@dwack1234/arabic-voice-to-text-nextjs/dist/package.css';\n\nexport default function MyPage() {\n  return (\n    <ArabicVoiceToText\n      apiEndpoint=\"http://192.168.4.54:8001\"\n      method=\"pipeline\"\n      maxDuration={60}\n      callbacks={{\n        onTranscriptionComplete: (result) => {\n          console.log('Transcription:', result.text);\n        },\n      }}\n    />\n  );\n}\n```\n\n## 📖 API Reference\n\n### Main Component: `ArabicVoiceToText`\n\n#### Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `apiEndpoint` | `string` | `http://192.168.4.54:8001` | STS API endpoint URL |\n| `method` | `'pipeline' \\| 'direct'` | `'pipeline'` | Processing method |\n| `maxDuration` | `number` | `60` | Maximum recording duration (seconds) |\n| `audioFormat` | `string` | `'audio/webm'` | Audio format for recording |\n| `sampleRate` | `number` | `16000` | Audio sample rate |\n| `showTimer` | `boolean` | `true` | Show recording timer |\n| `allowEdit` | `boolean` | `true` | Allow editing transcription |\n| `direction` | `'ltr' \\| 'rtl'` | `'rtl'` | Text direction |\n| `enableSounds` | `boolean` | `true` | Enable sound effects |\n| `callbacks` | `VoiceCallbacks` | `{}` | Event callbacks |\n| `className` | `string` | `''` | Custom CSS class |\n| `onInsertText` | `(text: string) => void` | - | Insert text callback |\n\n### Callbacks Interface\n\nThe component supports comprehensive callbacks for all events:\n\n```tsx\ninterface VoiceCallbacks {\n  // Recording Events\n  onRecordingStart?: (metadata: RecordingMetadata) => void;\n  onRecordingStop?: (duration: number, audioBlob: Blob) => void;\n  onRecordingPause?: (currentTime: number) => void;\n  onRecordingResume?: (currentTime: number) => void;\n  onRecordingError?: (error: Error) => void;\n  \n  // Transcription Events\n  onTranscriptionStart?: (audioBlob: Blob) => void;\n  onTranscriptionProgress?: (progress: number) => void;\n  onTranscriptionComplete?: (result: TranscriptionResult) => void;\n  onTranscriptionError?: (error: Error) => void;\n  \n  // Text Events\n  onTextChange?: (newText: string, source: 'transcription' | 'external') => void;\n  onTextInsert?: (text: string, targetField?: string) => void;\n  \n  // API Events\n  onApiRequest?: (requestData: ApiRequestData) => void;\n  onApiResponse?: (responseData: ApiResponseData) => void;\n  onApiError?: (error: ApiError) => void;\n  \n  // Permission Events\n  onMicrophonePermissionGranted?: () => void;\n  onMicrophonePermissionDenied?: (error: Error) => void;\n  \n  // State Events\n  onStatusChange?: (status: VoiceToTextStatus) => void;\n}\n```\n\n## 🎯 Usage Examples\n\n### Example 1: Basic Standalone\n\n```tsx\nimport { ArabicVoiceToText } from '@dwack1234/arabic-voice-to-text-nextjs';\n\nfunction App() {\n  return (\n    <ArabicVoiceToText\n      apiEndpoint=\"http://192.168.4.54:8001\"\n      callbacks={{\n        onTranscriptionComplete: (result) => {\n          console.log('Text:', result.text);\n          console.log('Duration:', result.duration);\n          console.log('Language:', result.language);\n        },\n      }}\n    />\n  );\n}\n```\n\n### Example 2: Form Integration\n\n```tsx\nimport { useState } from 'react';\nimport { ArabicVoiceToText } from '@dwack1234/arabic-voice-to-text-nextjs';\n\nfunction ContactForm() {\n  const [message, setMessage] = useState('');\n  \n  return (\n    <form>\n      <textarea\n        value={message}\n        onChange={(e) => setMessage(e.target.value)}\n        placeholder=\"Type or speak your message...\"\n      />\n      \n      <ArabicVoiceToText\n        onInsertText={(text) => setMessage(prev => prev + ' ' + text)}\n        callbacks={{\n          onTranscriptionComplete: (result) => {\n            // Automatically append to textarea\n            setMessage(prev => prev + ' ' + result.text);\n          },\n        }}\n      />\n    </form>\n  );\n}\n```\n\n### Example 3: Advanced Usage with All Callbacks\n\n```tsx\nimport { ArabicVoiceToText } from '@dwack1234/arabic-voice-to-text-nextjs';\n\nfunction AdvancedExample() {\n  return (\n    <ArabicVoiceToText\n      apiEndpoint=\"http://192.168.4.54:8001\"\n      method=\"pipeline\"\n      maxDuration={120}\n      callbacks={{\n        onRecordingStart: (metadata) => {\n          console.log('Started recording:', metadata);\n        },\n        onRecordingStop: (duration, blob) => {\n          console.log(`Recorded ${duration}s, size: ${blob.size}`);\n        },\n        onTranscriptionProgress: (progress) => {\n          console.log(`Progress: ${progress}%`);\n        },\n        onTranscriptionComplete: (result) => {\n          console.log('Result:', result);\n          // Save to database\n          saveToDB(result);\n        },\n        onApiError: (error) => {\n          console.error('API Error:', error);\n          alert(`Transcription failed: ${error.message}`);\n        },\n        onMicrophonePermissionDenied: (error) => {\n          alert('Microphone access denied. Please allow microphone access.');\n        },\n        onStatusChange: (status) => {\n          console.log('Status:', status);\n        },\n      }}\n    />\n  );\n}\n```\n\n## 🔧 Processing Methods\n\n### Pipeline Method (Recommended)\n\nBest for longer recordings. Processes audio in 30-second chunks for better accuracy and lower memory usage.\n\n```tsx\n<ArabicVoiceToText\n  method=\"pipeline\"\n  maxDuration={120}\n/>\n```\n\n### Direct Method\n\nBest for short recordings (< 30s). Processes the entire audio file at once.\n\n```tsx\n<ArabicVoiceToText\n  method=\"direct\"\n  maxDuration={30}\n/>\n```\n\n## 🎨 Styling\n\nThe component includes default styles. Import the CSS file:\n\n```tsx\nimport '@dwack1234/arabic-voice-to-text-nextjs/dist/package.css';\n```\n\n### Custom Styling\n\nOverride styles using className or CSS modules:\n\n```tsx\n<ArabicVoiceToText\n  className=\"my-custom-class\"\n/>\n```\n\n```css\n.my-custom-class {\n  /* Your custom styles */\n  background: linear-gradient(to right, #667eea 0%, #764ba2 100%);\n  border-radius: 16px;\n}\n```\n\n## 🌐 Browser Support\n\n| Browser | Minimum Version | Notes |\n|---------|----------------|-------|\n| Chrome | 49+ | ✅ Full support |\n| Firefox | 25+ | ✅ Full support |\n| Safari | 14.1+ | ✅ Full support (iOS 14.5+) |\n| Edge | 79+ | ✅ Full support |\n\n**Requirements:**\n- MediaRecorder API support\n- getUserMedia API support\n- Secure context (HTTPS or localhost)\n\n## 🔒 Privacy & Security\n\n- **No Data Storage**: Audio is processed in real-time and not stored by the component\n- **HTTPS Required**: For production, serve your app over HTTPS\n- **API Security**: The STS API should implement proper authentication\n- **Microphone Permission**: Users must explicitly grant microphone access\n\n## 🤝 Contributing\n\nContributions are welcome! Please check the [IMPLEMENTATION_GUIDE.md](./IMPLEMENTATION_GUIDE.md) for development setup.\n\n## 📝 License\n\nMIT © [dwack1234](https://github.com/dwack1234)\n\n## 🆘 Support\n\n- 📧 Email: support@example.com\n- 🐛 Issues: [GitHub Issues](https://github.com/dwack1234/arabic-voice-to-text-nextjs/issues)\n- 📖 Documentation: [Full Docs](https://github.com/dwack1234/arabic-voice-to-text-nextjs)\n\n## 🙏 Acknowledgments\n\n- Egyptian Arabic STS API\n- MediaRecorder Web API\n- React & Next.js communities\n\n---\n\nMade with ❤️ for the Arabic-speaking community\n","readmeFilename":"README.md"}