replace voice recorder realization for support chrome

src/components/deepfake/ChatterboxTTS.tsx

@@ -1,5 +1,6 @@
 import { useState, useRef, useEffect } from 'react';
 import { Recorder } from '../../lib/recorder';
+import VoiceCards from './VoiceCards';
 import './ChatterboxTTS.css';
 
 const API_URL = 'https://back.hack.kinsle.ru/process-audio';
@@ -46,7 +47,7 @@ const ChatterboxTTS = () => {
 	useEffect(() => {
 		navigator.mediaDevices.getUserMedia({ audio: true })
 			.then(stream => stream.getTracks().forEach(t => t.stop()))
-      .catch(() => {});
+			.catch(() => { });
 	}, []);
 
 	const updateTimer = () => {
@@ -221,13 +222,21 @@ const ChatterboxTTS = () => {
 
 	return (
 		<div className="chatterbox-container">
-      <h1>🎙️ Chatterbox TTS</h1>
+			<h1>Подделка голоса</h1>
+
+			<p>
+				Deepfake — синтез правдоподобных поддельных изображений, видео и звука при помощи искусственного интеллекта. Чаще всего дипфейки изображают известных людей в вымышленных ситуациях.
+			</p>
+
+			<p>
+				Давайте на нашем примере разберемся с этим! Для этого нам нужен небольшой отрывок вашего голоса. Не переживайте - это безопасно! Мы трепетно относимся к чувствительной информации, не храним ваши данные после обработки и не передаем их третьим лицам - все строго в соответствии с политикой соглашения.
+			</p>
 
 			<form onSubmit={handleSubmit}>
 				{/* Запись голоса */}
 				<div className={voiceSectionClass}>
 					<div className="voice-label">
-            🎤 Запишите голосовое сообщение для проверки на бота
+						🎤 Запишите голосовое сообщение - достаточно 10-15 секунд вашего голоса
 						{isUsingRecordedVoice && <span className="check-badge">✓ Готово</span>}
 					</div>
 
@@ -240,7 +249,7 @@ const ChatterboxTTS = () => {
 
 					{showVoiceText && (
 						<div className="voice-text">
-              📢 Произнесите: <span style={{ color: '#667eea' }}>"Хакатон 2026 французский стиль"</span>
+							📢 Произнесите, например: <span style={{ color: '#667eea' }}>"Хакатон 2026 походим модуль deepfake, кейс Цент Инвест команда Атейкин"</span>
 						</div>
 					)}
 
@@ -256,7 +265,7 @@ const ChatterboxTTS = () => {
 				</div>
 
 				{/* Загрузка файла */}
-        <div className="or-divider">или загрузите файл</div>
+				<div className="or-divider">или загрузите файл фрагмента голоса, желательно свой :D</div>
 
 				<div className="form-group">
 					<div
@@ -273,6 +282,27 @@ const ChatterboxTTS = () => {
 					</div>
 				</div>
 
+				<p>
+					Дипфейки часто создают и применяют в преступных целях. Их могут использовать для распространения ложных новостей, обмана или прохождения аудио- и видео- аутентификации.
+				</p>
+
+				<p>
+					Имея небольшой отрывок речи человека, мошенники могут полностью возсоздать интонацию, произношение и темперамет голоса.
+				</p>
+
+
+				{((isUsingRecordedVoice && recordedBlobRef.current) || fileName) && (
+					<div>
+						<p>
+							Вот примеры дипфейков.
+						</p>
+
+						<VoiceCards voiceBlob={recordedBlobRef.current} />
+
+						<h2>
+							Вы можете попробовать самостоятельно сделат дипфейк из своего голоса!
+						</h2>
+
 						{/* Текст */}
 						<div className="form-group">
 							<label>Текст для синтеза (макс 300 символов)</label>
@@ -281,7 +311,7 @@ const ChatterboxTTS = () => {
 						</div>
 
 						{/* Язык */}
-        <div className="form-group">
+						{/* <div className="form-group">
 			<label>Язык</label>
 			<select value={language} onChange={e => setLanguage(e.target.value)}>
 				<option value="en">English</option>
@@ -293,7 +323,7 @@ const ChatterboxTTS = () => {
 				<option value="pt">Portuguese</option>
 				<option value="hi">Hindi</option>
 			</select>
-        </div>
+			</div> */}
 
 						{/* Слайдеры */}
 						<div className="form-group">
@@ -330,12 +360,14 @@ const ChatterboxTTS = () => {
 						<button type="submit" className="submit-btn" disabled={loading}>
 							🚀 Сгенерировать аудио
 						</button>
+					</div>
+				)}
 			</form>
 
 			{loading && (
 				<div className="loading-block">
 					<div className="spinner" />
-          <p>Генерируем аудио... Это может занять 10-30 секунд</p>
+					<p>Генерируем аудио... Это может занять 5-15 секунд</p>
 				</div>
 			)}
 
@@ -346,7 +378,7 @@ const ChatterboxTTS = () => {
 					<h3>✅ Готово!</h3>
 					<audio src={resultUrl} controls />
 					<br />
-          <a href={resultUrl} className="download-btn" download="output.wav">💾 Скачать WAV</a>
+					<a href={resultUrl} className="download-btn" download="output.wav">💾 Скачать WAV'ку!</a>
 				</div>
 			)}
 		</div>