Spaces:
Running
on
A100
Running
on
A100
File size: 4,467 Bytes
ae238b3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
import { XMarkIcon } from '@heroicons/react/24/outline';
interface WelcomeModalProps {
isOpen: boolean;
onClose: () => void;
}
export default function WelcomeModal({ isOpen, onClose }: WelcomeModalProps) {
if (!isOpen) return null;
return (
<div className="modal modal-open">
<div className="modal-box max-w-4xl bg-gray-800 text-white border border-gray-600">
<div className="flex justify-between items-center mb-6">
<h3 className="font-bold text-xl text-blue-300">
Omnilingual ASR Media Transcription Tool
</h3>
<button
className="btn btn-sm btn-circle btn-ghost text-gray-300 hover:text-white hover:bg-gray-700"
onClick={onClose}
aria-label="Close modal"
>
<XMarkIcon className="w-5 h-5" />
</button>
</div>
<div className="space-y-4">
{/* Main Description */}
<div className="bg-gray-700 p-4 rounded-lg border-l-4 border-blue-500">
<h4 className="font-semibold text-blue-200 mb-2">About This Tool</h4>
<p className="text-gray-200 leading-relaxed">
This experimental transcription tool uses the Omnilingual ASR model to transcribe audio and video content
for <strong>low-resource languages</strong> around the world. Our goal is to help preserve and
document linguistic diversity by making transcription accessible for underrepresented languages.
</p>
</div>
{/* Important Disclaimer */}
<div className="bg-yellow-900/40 p-4 rounded-lg border-l-4 border-yellow-500">
<h4 className="font-semibold text-yellow-200 mb-2">⚠️ Important Disclaimer</h4>
<p className="text-yellow-100 leading-relaxed mb-3">
<strong>This is experimental software.</strong> While we strive for accuracy, transcriptions
are not perfect. You should always <strong>double-check the outputs and make edits accordingly</strong>
{" "}to ensure accuracy for your specific use case.
</p>
<p className="text-yellow-100 leading-relaxed mb-3">
<strong>Shared Server Limitations:</strong> Due to resource constraints, we can only process one request at a time on this shared server.
</p>
<p className="text-yellow-100 leading-relaxed">
<strong>Want dedicated access?</strong> Clone this HuggingFace Space or run on your own servers to remove server limitations. See the{' '}
<a
href="https://huggingface.co/spaces/facebook/mms-transcriptions/blob/main/README.md"
target="_blank"
rel="noopener noreferrer"
className="text-yellow-300 hover:text-yellow-200 underline transition-colors"
>
setup guide
</a>
{" "}for instructions.
</p>
</div>
{/* Language Information */}
<div className="bg-gray-700 p-4 rounded-lg border-l-4 border-green-500">
<h4 className="font-semibold text-green-200 mb-2">Supported Languages</h4>
<p className="text-gray-200 leading-relaxed">
For this public demo, we've restricted transcription to low-resource languages with
<strong> error rates below 10%</strong>. This ensures the best possible experience while
focusing on languages that could benefit most from improved transcription tools.
</p>
</div>
{/* Cultural Impact */}
<div className="bg-purple-900/40 p-4 rounded-lg border-l-4 border-purple-500">
<h4 className="font-semibold text-purple-200 mb-2">Preserving Linguistic Heritage</h4>
<p className="text-purple-100 leading-relaxed">
Many of the world's languages lack digital transcription tools. By improving these models
for low-resource languages, we're contributing to the preservation of cultural heritage
and making digital content more accessible to diverse communities.
</p>
</div>
</div>
<div className="modal-action mt-6">
<button className="py-2 px-4 bg-blue-600 hover:bg-blue-700 rounded text-sm transition-colors" onClick={onClose}>
Get Started
</button>
</div>
</div>
</div>
);
}
|