Upd

Dockerfile

@@ -4,21 +4,15 @@ WORKDIR /app
 
 RUN apt-get update && apt-get install -y \
     ffmpeg \
-    wget \
-    unzip \
+    gcc \
     && rm -rf /var/lib/apt/lists/*
 
-# Скачиваем Vosk модель при сборке
-RUN wget https://alphacephei.com/vosk/models/vosk-model-small-ru-0.22.zip \
-    && unzip vosk-model-small-ru-0.22.zip \
-    && rm vosk-model-small-ru-0.22.zip
-
 COPY requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
 
 COPY app.py .
 COPY index.html .
-COPY static ./static
+COPY static ./static 
 
 ENV PORT=7860
 EXPOSE 7860

app.py

@@ -1,16 +1,16 @@
 import os
-import json
 import tempfile
 import shutil
-import replicate
 from pathlib import Path
 from fastapi import FastAPI, File, UploadFile
-from fastapi.responses import HTMLResponse, StreamingResponse
+from fastapi.responses import HTMLResponse, JSONResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.middleware.cors import CORSMiddleware
+from faster_whisper import WhisperModel
 
 app = FastAPI()
 
+# CORS
 app.add_middleware(
     CORSMiddleware,
     allow_origins=["*"],
@@ -18,9 +18,16 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
+# Static files
 app.mount("/static", StaticFiles(directory="static"), name="static")
 
-REPLICATE_TOKEN = os.getenv("REPLICATE_API_TOKEN")
+print("Loading faster-whisper-tiny...")
+model = WhisperModel(
+    "tiny",
+    device="cpu",
+    compute_type="int8"
+)
+print("Model ready")
 
 @app.get("/", response_class=HTMLResponse)
 async def root():
@@ -29,32 +36,30 @@ async def root():
 
 @app.post("/transcribe")
 async def transcribe_audio(file: UploadFile = File(...)):
-    async def generate():
-        try:
-            yield json.dumps({"type": "status", "text": "🔄 Загрузка файла..."}) + "\n"
-            
-            suffix = Path(file.filename).suffix
-            with tempfile.NamedTemporaryFile(delete=False, suffix=suffix) as tmp:
-                shutil.copyfileobj(file.file, tmp)
-                tmp_path = tmp.name
-            
-            yield json.dumps({"type": "status", "text": "🔄 Распознавание через Replicate..."}) + "\n"
-            
-            client = replicate.Client(api_token=REPLICATE_TOKEN)
-            
-            with open(tmp_path, "rb") as f:
-                output = client.run(
-                    "openai/whisper:4d50797290df275329f202e48c76360b3f22b08d28c196cbc54600319435f8d2",
-                    input={"audio": f}
-                )
-            
-            Path(tmp_path).unlink()
-            
-            yield json.dumps({"type": "done", "text": output["text"]}) + "\n"
-                
-        except Exception as e:
-            yield json.dumps({"type": "error", "text": f"❌ Ошибка: {str(e)}"}) + "\n"
-        finally:
-            file.file.close()
+    tmp_path = None
+    try:
+        # Save uploaded file
+        suffix = Path(file.filename).suffix
+        with tempfile.NamedTemporaryFile(delete=False, suffix=suffix) as tmp:
+            shutil.copyfileobj(file.file, tmp)
+            tmp_path = tmp.name
+        
+        # Transcribe with faster-whisper
+        segments, info = model.transcribe(tmp_path, language="ru", beam_size=5)
+        
+        # Collect all text
+        text = " ".join([segment.text for segment in segments])
+        
+        return JSONResponse({"text": text.strip(), "status": "ok"})
     
-    return StreamingResponse(generate(), media_type="application/x-ndjson")
+    except Exception as e:
+        print(f"Error: {str(e)}")
+        return JSONResponse(
+            {"text": f"Error: {str(e)}", "status": "error"},
+            status_code=500
+        )
+    finally:
+        # Clean up
+        if tmp_path and Path(tmp_path).exists():
+            Path(tmp_path).unlink()
+        await file.close()

index.html

@@ -14,9 +14,9 @@
             <div class="copy-wrapper">
                 <span class="copy-feedback" id="copyFeedback">текст скопирован</span>
                 <button class="copy-btn" id="copyBtn" title="Копировать">
-                    <svg viewBox="0 0 24 24">
-                        <rect x="9" y="9" width="13" height="13" rx="1.5" stroke-linecap="round"/>
-                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" stroke-linecap="round"/>
+                    <svg viewBox="0 0 24 24" width="20" height="20">
+                        <rect x="9" y="9" width="13" height="13" rx="1.5" stroke="currentColor" fill="none" stroke-width="1.5"/>
+                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" stroke="currentColor" fill="none" stroke-width="1.5"/>
                     </svg>
                 </button>
             </div>

requirements.txt

@@ -1,9 +1,4 @@
 fastapi
 uvicorn[standard]
-openai-whisper
-torch
-torchaudio
 python-multipart
 faster-whisper
-vosk
-replicate

script.js

@@ -0,0 +1,160 @@
+// ============================================
+// AUDIO TO TEXT - ЧИСТЫЙ СТАТИК
+// ============================================
+
+const API_URL = 'https://api-inference.huggingface.co/models/openai/whisper-tiny';
+
+// Элементы интерфейса
+const copyBtn = document.getElementById('copyBtn');
+const copyFeedback = document.getElementById('copyFeedback');
+const transcriptText = document.getElementById('transcriptText');
+const dropZone = document.getElementById('dropZone');
+const attachBtn = document.getElementById('attachBtn');
+const transcriptArea = document.getElementById('transcriptArea');
+
+// ========== УПРАВЛЕНИЕ ТОКЕНОМ ==========
+let HF_TOKEN = localStorage.getItem('hf_token');
+
+function promptForToken() {
+    const token = prompt('🔑 Введи свой Hugging Face токен:\n(получить: https://huggingface.co/settings/tokens)');
+    if (token) {
+        localStorage.setItem('hf_token', token);
+        HF_TOKEN = token;
+        return true;
+    }
+    return false;
+}
+
+function resetToken() {
+    localStorage.removeItem('hf_token');
+    HF_TOKEN = null;
+    alert('🔄 Токен сброшен. Обнови страницу для ввода нового.');
+}
+
+// Проверяем токен при загрузке
+if (!HF_TOKEN) {
+    promptForToken();
+}
+
+// ========== КОПИРОВАНИЕ ==========
+copyBtn.addEventListener('click', async () => {
+    if (transcriptText.value) {
+        await navigator.clipboard.writeText(transcriptText.value);
+        copyFeedback.classList.add('show');
+        setTimeout(() => copyFeedback.classList.remove('show'), 2000);
+    }
+});
+
+// ========== DRAG & DROP ==========
+['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+    dropZone.addEventListener(eventName, preventDefaults, false);
+});
+
+function preventDefaults(e) {
+    e.preventDefault();
+    e.stopPropagation();
+}
+
+['dragenter', 'dragover'].forEach(eventName => {
+    dropZone.addEventListener(eventName, () => {
+        dropZone.classList.add('drag-over');
+    });
+});
+
+['dragleave', 'drop'].forEach(eventName => {
+    dropZone.addEventListener(eventName, () => {
+        dropZone.classList.remove('drag-over');
+    });
+});
+
+dropZone.addEventListener('drop', (e) => {
+    const files = e.dataTransfer.files;
+    if (files.length) {
+        handleFile(files[0]);
+    }
+});
+
+// ========== ВЫБОР ФАЙЛА ==========
+attachBtn.addEventListener('click', () => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'audio/*';
+    input.onchange = (e) => {
+        if (e.target.files.length) {
+            handleFile(e.target.files[0]);
+        }
+    };
+    input.click();
+});
+
+dropZone.addEventListener('click', (e) => {
+    if (e.target !== attachBtn && !attachBtn.contains(e.target)) {
+        attachBtn.click();
+    }
+});
+
+// ========== ОСНОВНАЯ ФУНКЦИЯ ==========
+async function handleFile(file) {
+    console.log('🎵 файл:', file.name);
+    
+    // Проверяем токен
+    if (!HF_TOKEN) {
+        if (!promptForToken()) {
+            transcriptText.value = '❌ Без токена невозможно распознать речь';
+            return;
+        }
+    }
+    
+    dropZone.style.display = 'none';
+    transcriptArea.classList.add('active');
+    transcriptText.value = '🔄 Отправка на распознавание...';
+    
+    const formData = new FormData();
+    formData.append('file', file);
+    
+    try {
+        const arrayBuffer = await file.arrayBuffer();
+        
+        const response = await fetch(API_URL, {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${HF_TOKEN}`,
+                'Content-Type': file.type || 'audio/mpeg'
+            },
+            body: arrayBuffer
+        });
+        
+        // Обработка ошибок авторизации
+        if (response.status === 401 || response.status === 403) {
+            localStorage.removeItem('hf_token');
+            HF_TOKEN = null;
+            transcriptText.value = '❌ Токен недействителен. Обнови страницу и введи новый.';
+            return;
+        }
+        
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        
+        const data = await response.json();
+        transcriptText.value = data.text || '⚠️ Пустой ответ от API';
+        
+    } catch (error) {
+        transcriptText.value = `❌ Ошибка: ${error.message}`;
+        console.error(error);
+    }
+}
+
+// ========== ДОБАВЛЯЕМ КНОПКУ СБРОСА В ФУТЕР ==========
+// Этот код добавит ссылку для сброса токена в футер
+document.addEventListener('DOMContentLoaded', () => {
+    const footer = document.querySelector('.footer');
+    if (footer) {
+        const resetLink = document.createElement('span');
+        resetLink.innerHTML = ' · <a href="#" onclick="resetToken(); return false;">🔄 сбросить токен</a>';
+        footer.appendChild(resetLink);
+    }
+});
+
+// Делаем функцию глобальной
+window.resetToken = resetToken;

static/script.js

@@ -5,6 +5,7 @@ const dropZone = document.getElementById('dropZone');
 const attachBtn = document.getElementById('attachBtn');
 const transcriptArea = document.getElementById('transcriptArea');
 
+// Copy button functionality
 copyBtn.addEventListener('click', async () => {
     if (transcriptText.value) {
         await navigator.clipboard.writeText(transcriptText.value);
@@ -15,6 +16,7 @@ copyBtn.addEventListener('click', async () => {
     }
 });
 
+// Prevent defaults for drag events
 ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
     dropZone.addEventListener(eventName, preventDefaults, false);
 });
@@ -24,6 +26,7 @@ function preventDefaults(e) {
     e.stopPropagation();
 }
 
+// Drag over effects
 ['dragenter', 'dragover'].forEach(eventName => {
     dropZone.addEventListener(eventName, () => {
         dropZone.classList.add('drag-over');
@@ -36,6 +39,7 @@ function preventDefaults(e) {
     });
 });
 
+// Handle dropped files
 dropZone.addEventListener('drop', (e) => {
     const files = e.dataTransfer.files;
     if (files.length) {
@@ -43,6 +47,7 @@ dropZone.addEventListener('drop', (e) => {
     }
 });
 
+// Attach button click
 attachBtn.addEventListener('click', () => {
     const input = document.createElement('input');
     input.type = 'file';
@@ -55,18 +60,20 @@ attachBtn.addEventListener('click', () => {
     input.click();
 });
 
+// Click on drop zone (except attach button)
 dropZone.addEventListener('click', (e) => {
     if (e.target !== attachBtn && !attachBtn.contains(e.target)) {
         attachBtn.click();
     }
 });
 
+// Handle file upload and transcription
 async function handleFile(file) {
     console.log('файл получен:', file.name);
     
     dropZone.style.display = 'none';
     transcriptArea.classList.add('active');
-    transcriptText.value = '🔄 Подготовка...';
+    transcriptText.value = 'расшифровка...\n\nэто занимает несколько секунд';
     
     const formData = new FormData();
     formData.append('file', file);
@@ -77,40 +84,15 @@ async function handleFile(file) {
             body: formData
         });
         
-        const reader = response.body.getReader();
-        const decoder = new TextDecoder();
-        let buffer = '';
+        const data = await response.json();
         
-        while (true) {
-            const { value, done } = await reader.read();
-            if (done) break;
-            
-            buffer += decoder.decode(value, { stream: true });
-            const lines = buffer.split('\n');
-            buffer = lines.pop();
-            
-            for (const line of lines) {
-                if (line.trim()) {
-                    try {
-                        const data = JSON.parse(line);
-                        
-                        if (data.type === 'status') {
-                            transcriptText.value = data.text;
-                        } else if (data.type === 'segment') {
-                            transcriptText.value = data.text;
-                        } else if (data.type === 'done') {
-                            transcriptText.value = data.text;
-                        } else if (data.type === 'error') {
-                            transcriptText.value = data.text;
-                        }
-                    } catch (e) {
-                        console.error('Error parsing JSON:', e);
-                    }
-                }
-            }
+        if (data.status === 'ok') {
+            transcriptText.value = data.text;
+        } else {
+            transcriptText.value = 'Ошибка: ' + data.text;
         }
     } catch (error) {
-        transcriptText.value = '❌ Ошибка соединения';
-        console.error(error);
+        transcriptText.value = 'Ошибка соединения с сервером';
+        console.error('Fetch error:', error);
     }
 }

static/styles.css

@@ -4,317 +4,178 @@
     box-sizing: border-box;
 }
 
-html, body {
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-}
-
 body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-    font-weight: 400;
-    background: linear-gradient(165deg, #9b8aed 0%, #5a4a9a 100%);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+    background: #f5f5f7;
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 24px;
-    height: 100vh;
-    width: 100vw;
-    overflow: hidden;
+    min-height: 100vh;
+    padding: 20px;
 }
 
 .frame {
+    max-width: 800px;
     width: 100%;
-    max-width: 880px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    max-height: 800px;
-    align-items: center;
+    background: white;
+    border-radius: 24px;
+    padding: 32px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
 }
 
 h1 {
-    color: white;
-    font-size: clamp(36px, 7vw, 48px);
-    font-weight: 520;
-    letter-spacing: -0.03em;
-    margin: 0 0 24px 0;
-    text-transform: uppercase;
-    font-family: 'Inter', sans-serif;
-    line-height: 1;
-    flex-shrink: 0;
-    text-align: center;
-    width: 100%;
-    opacity: 0.95;
-    transition: opacity 0.3s, letter-spacing 0.3s;
+    font-size: 28px;
+    font-weight: 600;
+    margin-bottom: 24px;
+    color: #1d1d1f;
+    letter-spacing: -0.5px;
 }
 
-h1:hover {
-    opacity: 1;
-    letter-spacing: -0.02em;
+.transcript-card {
+    background: #ffffff;
+    border: 1px solid #e6e6e8;
+    border-radius: 16px;
+    padding: 20px;
+    margin-bottom: 24px;
 }
 
-.transcript-card {
-    background: rgba(245, 245, 250, 0.95);
-    backdrop-filter: blur(10px);
-    border-radius: 32px;
-    padding: 32px 32px 24px;
+.copy-wrapper {
     position: relative;
     display: flex;
-    flex-direction: column;
-    box-shadow: 0 25px 40px -16px rgba(0,0,0,0.4),
-                0 0 0 1px rgba(255,255,255,0.1) inset;
-    flex: 1;
-    min-height: 0;
-    width: 100%;
-    transition: box-shadow 0.3s;
+    justify-content: flex-end;
+    margin-bottom: 12px;
 }
 
-.transcript-card:hover {
-    box-shadow: 0 28px 48px -18px rgba(0,0,0,0.5),
-                0 0 0 1px rgba(255,255,255,0.15) inset;
+.copy-feedback {
+    position: absolute;
+    right: 40px;
+    top: 4px;
+    font-size: 12px;
+    color: #28a745;
+    opacity: 0;
+    transition: opacity 0.2s;
+    background: white;
+    padding: 4px 8px;
+    border-radius: 12px;
 }
 
-.copy-wrapper {
-    position: absolute;
-    top: 20px;
-    right: 24px;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    z-index: 10;
+.copy-feedback.show {
+    opacity: 1;
 }
 
 .copy-btn {
-    background: rgba(255,255,255,0.9);
-    border: none;
-    width: 44px;
-    height: 44px;
-    padding: 11px;
+    background: none;
+    border: 1px solid #d2d2d7;
+    border-radius: 8px;
+    padding: 8px;
     cursor: pointer;
-    border-radius: 50%;
+    color: #86868b;
+    transition: all 0.2s;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1);
-    color: #2d2d2d;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
-    backdrop-filter: blur(4px);
 }
 
 .copy-btn:hover {
-    background: white;
-    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
-    transform: scale(0.96);
-    color: #5a4a9a;
-}
-
-.copy-btn:active {
-    transform: scale(0.92);
-}
-
-.copy-btn svg {
-    width: 22px;
-    height: 22px;
-    stroke: currentColor;
-    stroke-width: 1.8;
-    fill: none;
-    transition: stroke 0.2s;
-}
-
-.copy-feedback {
-    font-size: 14px;
-    color: #1e5e2b;
-    font-weight: 500;
-    opacity: 0;
-    transition: opacity 0.2s ease, transform 0.2s ease;
-    background: rgba(255,255,255,0.95);
-    padding: 6px 16px;
-    border-radius: 100px;
-    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
-    letter-spacing: -0.01em;
-    backdrop-filter: blur(4px);
-    pointer-events: none;
-    transform: translateX(4px);
-}
-
-.copy-feedback.show {
-    opacity: 1;
-    transform: translateX(0);
+    background: #f5f5f7;
+    border-color: #0071e3;
+    color: #0071e3;
 }
 
 .drop-zone {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    min-height: 0;
-    margin-top: 20px;
-    width: 100%;
+    border: 2px dashed #c6c6c8;
+    border-radius: 12px;
+    padding: 32px 20px;
+    text-align: center;
+    transition: all 0.2s;
     cursor: pointer;
-    transition: background 0.25s ease, transform 0.2s ease;
-    border-radius: 24px;
+    margin-bottom: 16px;
     position: relative;
 }
 
 .drop-zone.drag-over {
-    background: rgba(155, 138, 237, 0.12);
-    backdrop-filter: blur(4px);
-}
-
-.drop-zone:active {
-    transform: scale(0.99);
+    border-color: #0071e3;
+    background: rgba(0,113,227,0.05);
 }
 
 .instruction {
-    font-family: 'JetBrains Mono', 'SF Mono', 'Roboto Mono', monospace;
-    font-size: clamp(20px, 5vw, 26px);
-    font-weight: 450;
-    color: #2a2a2a;
-    line-height: 1.4;
-    text-align: center;
-    max-width: 90%;
-    margin-bottom: 16px;
-    transition: opacity 0.2s;
+    font-size: 16px;
+    color: #1d1d1f;
+    margin-bottom: 4px;
 }
 
 .instruction-small {
-    font-family: 'Inter', sans-serif;
-    font-size: 15px;
-    color: #5a5a5a;
-    margin-top: 8px;
-    font-weight: 400;
-    letter-spacing: 0.2px;
-    opacity: 0.8;
-    transition: opacity 0.2s;
-}
-
-.drop-zone:hover .instruction-small {
-    opacity: 1;
+    font-size: 14px;
+    color: #86868b;
+    margin-bottom: 16px;
 }
 
 .attach-btn {
-    background: none;
+    background: #0071e3;
+    color: white;
     border: none;
-    width: 70px;
-    height: 70px;
-    font-size: 44px;
+    border-radius: 40px;
+    padding: 12px 24px;
+    font-size: 16px;
     cursor: pointer;
-    padding: 0;
-    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.4, 1), opacity 0.2s;
-    line-height: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 12px;
-    color: #3a3a5a;
-    opacity: 0.75;
-    transform-origin: center;
+    transition: background 0.2s;
+    box-shadow: 0 2px 8px rgba(0,113,227,0.3);
 }
 
 .attach-btn:hover {
-    transform: scale(1.15) rotate(5deg);
-    opacity: 1;
-}
-
-.attach-btn:active {
-    transform: scale(1.05) rotate(2deg);
+    background: #0077ed;
 }
 
 .transcript-area {
     display: none;
-    width: 100%;
-    height: 100%;
-    flex-direction: column;
-    animation: fadeIn 0.4s ease;
 }
 
 .transcript-area.active {
-    display: flex;
-}
-
-@keyframes fadeIn {
-    0% { opacity: 0; transform: translateY(6px); }
-    100% { opacity: 1; transform: translateY(0); }
+    display: block;
 }
 
-textarea {
+#transcriptText {
     width: 100%;
-    background: transparent;
-    border: none;
-    font-family: 'JetBrains Mono', 'SF Mono', monospace;
+    min-height: 200px;
+    padding: 16px;
+    border: 1px solid #e6e6e8;
+    border-radius: 12px;
     font-size: 15px;
-    line-height: 1.75;
-    color: #1a1a2c;
-    resize: none;
-    flex: 1;
-    padding: 12px 4px;
-    margin: 0;
-    outline: none;
-    font-weight: 420;
+    line-height: 1.6;
+    font-family: inherit;
+    resize: vertical;
+    background: #fafafc;
+    color: #1d1d1f;
 }
 
-textarea::placeholder {
-    color: #8a8aa8;
-    font-style: italic;
-    opacity: 0.7;
+#transcriptText:focus {
+    outline: none;
+    border-color: #0071e3;
 }
 
 .footer {
-    margin-top: 24px;
-    color: rgba(255,255,255,0.85);
-    font-size: 15px;
-    font-weight: 400;
-    letter-spacing: 0.5px;
     text-align: center;
-    flex-shrink: 0;
-    padding-bottom: 4px;
-    width: 100%;
-    transition: opacity 0.2s;
+    color: #86868b;
+    font-size: 14px;
 }
 
 .footer a {
-    color: white;
+    color: #515154;
     text-decoration: none;
-    font-weight: 550;
-    border-bottom: 1.5px solid rgba(255,255,255,0.25);
-    padding-bottom: 2px;
-    transition: border-color 0.2s, opacity 0.2s;
+    font-weight: 500;
 }
 
 .footer a:hover {
-    border-bottom-color: white;
-    opacity: 1;
+    color: #0071e3;
+    text-decoration: underline;
 }
 
 @media (max-width: 600px) {
-    body {
-        padding: 16px;
+    .frame {
+        padding: 20px;
     }
     
     h1 {
-        margin-bottom: 18px;
-    }
-    
-    .instruction {
-        font-size: 20px;
-    }
-    
-    .transcript-card {
-        padding: 24px 20px 20px;
-    }
-    
-    .attach-btn {
-        width: 64px;
-        height: 64px;
-        font-size: 42px;
-    }
-    
-    .copy-btn {
-        width: 40px;
-        height: 40px;
-        padding: 10px;
+        font-size: 24px;
     }
 }

styles.css

@@ -0,0 +1,320 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    font-weight: 400;
+    background: linear-gradient(165deg, #9b8aed 0%, #5a4a9a 100%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 24px;
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+}
+
+.frame {
+    width: 100%;
+    max-width: 880px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    max-height: 800px;
+    align-items: center;
+}
+
+h1 {
+    color: white;
+    font-size: clamp(36px, 7vw, 48px);
+    font-weight: 520;
+    letter-spacing: -0.03em;
+    margin: 0 0 24px 0;
+    text-transform: uppercase;
+    font-family: 'Inter', sans-serif;
+    line-height: 1;
+    flex-shrink: 0;
+    text-align: center;
+    width: 100%;
+    opacity: 0.95;
+    transition: opacity 0.3s, letter-spacing 0.3s;
+}
+
+h1:hover {
+    opacity: 1;
+    letter-spacing: -0.02em;
+}
+
+.transcript-card {
+    background: rgba(245, 245, 250, 0.95);
+    backdrop-filter: blur(10px);
+    border-radius: 32px;
+    padding: 32px 32px 24px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 25px 40px -16px rgba(0,0,0,0.4),
+                0 0 0 1px rgba(255,255,255,0.1) inset;
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+    transition: box-shadow 0.3s;
+}
+
+.transcript-card:hover {
+    box-shadow: 0 28px 48px -18px rgba(0,0,0,0.5),
+                0 0 0 1px rgba(255,255,255,0.15) inset;
+}
+
+.copy-wrapper {
+    position: absolute;
+    top: 20px;
+    right: 24px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    z-index: 10;
+}
+
+.copy-btn {
+    background: rgba(255,255,255,0.9);
+    border: none;
+    width: 44px;
+    height: 44px;
+    padding: 11px;
+    cursor: pointer;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1);
+    color: #2d2d2d;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+    backdrop-filter: blur(4px);
+}
+
+.copy-btn:hover {
+    background: white;
+    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
+    transform: scale(0.96);
+    color: #5a4a9a;
+}
+
+.copy-btn:active {
+    transform: scale(0.92);
+}
+
+.copy-btn svg {
+    width: 22px;
+    height: 22px;
+    stroke: currentColor;
+    stroke-width: 1.8;
+    fill: none;
+    transition: stroke 0.2s;
+}
+
+.copy-feedback {
+    font-size: 14px;
+    color: #1e5e2b;
+    font-weight: 500;
+    opacity: 0;
+    transition: opacity 0.2s ease, transform 0.2s ease;
+    background: rgba(255,255,255,0.95);
+    padding: 6px 16px;
+    border-radius: 100px;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
+    letter-spacing: -0.01em;
+    backdrop-filter: blur(4px);
+    pointer-events: none;
+    transform: translateX(4px);
+}
+
+.copy-feedback.show {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+.drop-zone {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 0;
+    margin-top: 20px;
+    width: 100%;
+    cursor: pointer;
+    transition: background 0.25s ease, transform 0.2s ease;
+    border-radius: 24px;
+    position: relative;
+}
+
+.drop-zone.drag-over {
+    background: rgba(155, 138, 237, 0.12);
+    backdrop-filter: blur(4px);
+}
+
+.drop-zone:active {
+    transform: scale(0.99);
+}
+
+.instruction {
+    font-family: 'JetBrains Mono', 'SF Mono', 'Roboto Mono', monospace;
+    font-size: clamp(20px, 5vw, 26px);
+    font-weight: 450;
+    color: #2a2a2a;
+    line-height: 1.4;
+    text-align: center;
+    max-width: 90%;
+    margin-bottom: 16px;
+    transition: opacity 0.2s;
+}
+
+.instruction-small {
+    font-family: 'Inter', sans-serif;
+    font-size: 15px;
+    color: #5a5a5a;
+    margin-top: 8px;
+    font-weight: 400;
+    letter-spacing: 0.2px;
+    opacity: 0.8;
+    transition: opacity 0.2s;
+}
+
+.drop-zone:hover .instruction-small {
+    opacity: 1;
+}
+
+.attach-btn {
+    background: none;
+    border: none;
+    width: 70px;
+    height: 70px;
+    font-size: 44px;
+    cursor: pointer;
+    padding: 0;
+    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.4, 1), opacity 0.2s;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 12px;
+    color: #3a3a5a;
+    opacity: 0.75;
+    transform-origin: center;
+}
+
+.attach-btn:hover {
+    transform: scale(1.15) rotate(5deg);
+    opacity: 1;
+}
+
+.attach-btn:active {
+    transform: scale(1.05) rotate(2deg);
+}
+
+.transcript-area {
+    display: none;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    animation: fadeIn 0.4s ease;
+}
+
+.transcript-area.active {
+    display: flex;
+}
+
+@keyframes fadeIn {
+    0% { opacity: 0; transform: translateY(6px); }
+    100% { opacity: 1; transform: translateY(0); }
+}
+
+textarea {
+    width: 100%;
+    background: transparent;
+    border: none;
+    font-family: 'JetBrains Mono', 'SF Mono', monospace;
+    font-size: 15px;
+    line-height: 1.75;
+    color: #1a1a2c;
+    resize: none;
+    flex: 1;
+    padding: 12px 4px;
+    margin: 0;
+    outline: none;
+    font-weight: 420;
+}
+
+textarea::placeholder {
+    color: #8a8aa8;
+    font-style: italic;
+    opacity: 0.7;
+}
+
+.footer {
+    margin-top: 24px;
+    color: rgba(255,255,255,0.85);
+    font-size: 15px;
+    font-weight: 400;
+    letter-spacing: 0.5px;
+    text-align: center;
+    flex-shrink: 0;
+    padding-bottom: 4px;
+    width: 100%;
+    transition: opacity 0.2s;
+}
+
+.footer a {
+    color: white;
+    text-decoration: none;
+    font-weight: 550;
+    border-bottom: 1.5px solid rgba(255,255,255,0.25);
+    padding-bottom: 2px;
+    transition: border-color 0.2s, opacity 0.2s;
+}
+
+.footer a:hover {
+    border-bottom-color: white;
+    opacity: 1;
+}
+
+@media (max-width: 600px) {
+    body {
+        padding: 16px;
+    }
+    
+    h1 {
+        margin-bottom: 18px;
+    }
+    
+    .instruction {
+        font-size: 20px;
+    }
+    
+    .transcript-card {
+        padding: 24px 20px 20px;
+    }
+    
+    .attach-btn {
+        width: 64px;
+        height: 64px;
+        font-size: 42px;
+    }
+    
+    .copy-btn {
+        width: 40px;
+        height: 40px;
+        padding: 10px;
+    }
+}