oneword-ai 0.1.0__py3-none-any.whl

onewordai/web/app.js

@@ -0,0 +1,361 @@
+/**
+ * Frontend JavaScript for OneWord AI
+ * Handles file upload, API communication, and UI updates
+ */
+
+// ========== STATE ==========
+let uploadedFileId = null;
+let currentJobId = null;
+let pollingInterval = null;
+
+// ========== DOM ELEMENTS ==========
+const dropzone = document.getElementById('dropzone');
+const fileInput = document.getElementById('fileInput');
+const fileInfo = document.getElementById('fileInfo');
+const fileName = document.getElementById('fileName');
+const fileSize = document.getElementById('fileSize');
+const processBtn = document.getElementById('processBtn');
+const progressCard = document.getElementById('progressCard');
+const downloadCard = document.getElementById('downloadCard');
+const progressFill = document.getElementById('progressFill');
+const progressText = document.getElementById('progressText');
+const statusText = document.getElementById('statusText');
+const downloadBtn = document.getElementById('downloadBtn');
+const resetBtn = document.getElementById('resetBtn');
+const cancelBtn = document.getElementById('cancelBtn');
+const instaPopup = document.getElementById('instaPopup');
+const closePopup = document.getElementById('closePopup');
+
+const modelSelect = document.getElementById('modelSelect');
+const languageSelect = document.getElementById('languageSelect');
+const modeSelect = document.getElementById('modeSelect');
+
+// Prevent accidental page reload during processing
+let isProcessing = false;
+
+window.addEventListener('beforeunload', (e) => {
+    if (isProcessing) {
+        e.preventDefault();
+        e.returnValue = ''; // Required for Chrome
+        return ''; // Required for other browsers
+    }
+});
+
+// ========== FILE UPLOAD ==========
+dropzone.addEventListener('click', () => {
+    fileInput.click();
+});
+
+dropzone.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    dropzone.classList.add('dragover');
+});
+
+dropzone.addEventListener('dragleave', () => {
+    dropzone.classList.remove('dragover');
+});
+
+dropzone.addEventListener('drop', (e) => {
+    e.preventDefault();
+    dropzone.classList.remove('dragover');
+
+    const files = e.dataTransfer.files;
+    if (files.length > 0) {
+        handleFile(files[0]);
+    }
+});
+
+fileInput.addEventListener('change', (e) => {
+    if (e.target.files.length > 0) {
+        handleFile(e.target.files[0]);
+    }
+});
+
+async function handleFile(file) {
+    // Validate file size (100MB limit)
+    const maxSize = 100 * 1024 * 1024;
+    if (file.size > maxSize) {
+        alert('File too large! Maximum size is 100MB.');
+        return;
+    }
+
+    // Show file info
+    fileName.textContent = `📁 ${file.name}`;
+    fileSize.textContent = `📊 ${formatFileSize(file.size)}`;
+    fileInfo.classList.remove('hidden');
+
+    // Upload file
+    statusText.textContent = 'Uploading...';
+    progressCard.classList.remove('hidden');
+
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+        const response = await fetch('/api/upload', {
+            method: 'POST',
+            body: formData
+        });
+
+        if (!response.ok) {
+            throw new Error('Upload failed');
+        }
+
+        const data = await response.json();
+        uploadedFileId = data.file_id;
+
+        // Enable process button
+        processBtn.disabled = false;
+        progressCard.classList.add('hidden');
+
+    } catch (error) {
+        alert('Upload failed: ' + error.message);
+        progressCard.classList.add('hidden');
+    }
+}
+
+function formatFileSize(bytes) {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+}
+
+// ========== PROCESSING ==========
+processBtn.addEventListener('click', async () => {
+    if (!uploadedFileId) {
+        alert('Please upload a file first');
+        return;
+    }
+
+    // Get config
+    const model = modelSelect.value;
+    const language = languageSelect.value || null;
+    const mode = modeSelect.value;
+
+    // Start processing
+    const formData = new FormData();
+    formData.append('file_id', uploadedFileId);
+    formData.append('model', model);
+    if (language) {
+        formData.append('language', language);
+    }
+    formData.append('mode', mode);
+
+    try {
+        const response = await fetch('/api/process', {
+            method: 'POST',
+            body: formData
+        });
+
+        if (!response.ok) {
+            throw new Error('Processing failed to start');
+        }
+
+        const data = await response.json();
+        currentJobId = data.job_id;
+
+        // Show progress card
+        progressCard.classList.remove('hidden');
+        processBtn.disabled = true;
+
+        // Start polling
+        startPolling();
+
+    } catch (error) {
+        alert('Error: ' + error.message);
+    }
+});
+
+// ========== POLLING ==========
+// ========== POLLING ==========
+let simulatedProgress = 0;
+
+function startPolling() {
+    simulatedProgress = 0;
+
+    // Status polling
+    pollingInterval = setInterval(async () => {
+        try {
+            const response = await fetch(`/api/status/${currentJobId}`);
+
+            if (response.status === 404) {
+                stopPolling();
+                alert('Connection lost or server restarted. Please try uploading again.');
+                resetUI();
+                return;
+            }
+
+            if (!response.ok) {
+                throw new Error('Status check failed');
+            }
+
+            const job = await response.json();
+
+            // Update UI
+            updateProgress(job);
+
+            // Check if complete
+            if (job.status === 'completed') {
+                stopPolling();
+                // Force 100% just in case
+                progressFill.style.width = '100%';
+                progressText.textContent = '100%';
+                setTimeout(() => showDownload(), 500);
+            } else if (job.status === 'failed') {
+                stopPolling();
+                alert('Processing failed: ' + job.error);
+                resetUI();
+            } else if (job.status === 'cancelled') {
+                stopPolling();
+                alert('Process was cancelled.');
+                resetUI();
+            }
+
+        } catch (error) {
+            console.error('Polling error:', error);
+        }
+    }, 1000);
+
+    // Simulation interval remains the same
+    simulationInterval = setInterval(() => {
+        if (simulatedProgress < 90) {
+            // Slower progress as it gets higher
+            const increment = simulatedProgress < 30 ? 2 : (simulatedProgress < 60 ? 1 : 0.5);
+            simulatedProgress += increment;
+
+            // Only update visualization if real progress isn't higher
+            const currentReal = parseFloat(progressFill.style.width) || 0;
+            if (simulatedProgress > currentReal) {
+                progressFill.style.width = simulatedProgress + '%';
+                progressText.textContent = Math.round(simulatedProgress) + '%';
+            }
+        }
+    }, 500);
+
+    // Set processing flag
+    isProcessing = true;
+}
+
+let simulationInterval = null;
+
+// Cancel button handler
+cancelBtn.addEventListener('click', async () => {
+    if (!currentJobId) return;
+
+    if (confirm('Are you sure you want to cancel? Any progress will be lost.')) {
+        try {
+            await fetch(`/api/cancel/${currentJobId}`, { method: 'POST' });
+            stopPolling();
+            resetUI();
+            alert('Process cancelled successfully.');
+        } catch (error) {
+            console.error('Cancel failed:', error);
+            alert('Failed to cancel. The process may have already completed.');
+        }
+    }
+});
+
+function stopPolling() {
+    if (pollingInterval) {
+        clearInterval(pollingInterval);
+        pollingInterval = null;
+    }
+    if (simulationInterval) {
+        clearInterval(simulationInterval);
+        simulationInterval = null;
+    }
+    isProcessing = false; // Clear processing flag
+}
+
+function updateProgress(job) {
+    const realProgress = job.progress || 0;
+
+    // Calculate display progress
+    // If real progress is < 5% (likely downloading), don't simulate too far ahead
+    // Max simulation cap: 95%
+    let displayProgress = realProgress;
+
+    if (realProgress < simulatedProgress) {
+        // We are simulating ahead
+        // But if real is 0 (downloading), cap simulation at 10% so we don't look like we're transcribing
+        if (realProgress === 0 && simulatedProgress > 10) {
+            simulatedProgress = 10;
+        } else {
+            simulatedProgress += (95 - simulatedProgress) * 0.05;
+        }
+        displayProgress = simulatedProgress;
+    } else {
+        // Real progress caught up
+        simulatedProgress = realProgress;
+    }
+
+    progressFill.style.width = displayProgress + '%';
+
+    // Update Text Logic: Priority to Backend Message
+    if (job.status_message) {
+        progressText.textContent = `${job.status_message} (${Math.round(displayProgress)}%)`;
+    } else {
+        progressText.textContent = `Processing... ${Math.round(displayProgress)}%`;
+    }
+    // Update status text - PRIORITY TO BACKEND MESSAGE
+    if (job.status_message) {
+        // Use the backend's custom message (e.g., "Downloading...", "Transcribing...")
+        statusText.textContent = job.status_message;
+    } else if (job.status === 'processing') {
+        statusText.textContent = '🧠 Transcribing with Whisper... (This may take a moment)';
+    } else if (job.status === 'pending') {
+        statusText.textContent = '⏳ Waiting to start...';
+    }
+}
+
+function showDownload() {
+    progressCard.classList.add('hidden');
+    downloadCard.classList.remove('hidden');
+
+    // Show Instagram popup after 2 seconds
+    setTimeout(() => {
+        instaPopup.classList.remove('hidden');
+    }, 2000);
+}
+
+// ========== DOWNLOAD ==========
+downloadBtn.addEventListener('click', () => {
+    if (currentJobId) {
+        window.location.href = `/api/download/${currentJobId}`;
+    }
+});
+
+// ========== RESET ==========
+resetBtn.addEventListener('click', () => {
+    resetUI();
+});
+
+function resetUI() {
+    uploadedFileId = null;
+    currentJobId = null;
+    fileInfo.classList.add('hidden');
+    progressCard.classList.add('hidden');
+    downloadCard.classList.add('hidden');
+    processBtn.disabled = true;
+    progressFill.style.width = '0%';
+    progressText.textContent = '0%';
+    fileInput.value = '';
+}
+
+// ========== POPUP ==========
+closePopup.addEventListener('click', () => {
+    instaPopup.classList.add('hidden');
+});
+
+instaPopup.addEventListener('click', (e) => {
+    if (e.target === instaPopup) {
+        instaPopup.classList.add('hidden');
+    }
+});
+
+// Show popup on load
+setTimeout(() => {
+    instaPopup.classList.remove('hidden');
+}, 1000);

onewordai/web/index.html

@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OneWord AI - Subtitle Generator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="grid-bg"></div>
+
+    <div class="container">
+        <!-- Header -->
+        <header class="header">
+            <h1 class="title">OneWord AI</h1>
+            <p class="subtitle">Cinematic Subtitle Generator</p>
+        </header>
+
+        <!-- Upload Section -->
+        <div class="card upload-card">
+            <div class="card-header">
+                <h2>Upload Video/Audio</h2>
+            </div>
+
+            <div id="dropzone" class="dropzone">
+                <div class="dropzone-content">
+                    <svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                        <polyline points="17 8 12 3 7 8"></polyline>
+                        <line x1="12" y1="3" x2="12" y2="15"></line>
+                    </svg>
+                    <p class="dropzone-text">Drag & drop your file here</p>
+                    <p class="dropzone-subtext">or click to browse</p>
+                    <p class="file-limit">Max 100MB • MP4, MP3, WAV</p>
+                </div>
+                <input type="file" id="fileInput" accept="video/*,audio/*" hidden>
+            </div>
+
+            <div id="fileInfo" class="file-info hidden">
+                <p id="fileName"></p>
+                <p id="fileSize"></p>
+            </div>
+        </div>
+
+        <!-- Configuration Section -->
+        <div class="card config-card">
+            <div class="card-header">
+                <h2>Configuration</h2>
+            </div>
+
+            <div class="form-grid">
+                <!-- Model Selection -->
+                <div class="form-group">
+                    <label for="modelSelect">Whisper Model</label>
+                    <select id="modelSelect" class="select-input">
+                        <option value="medium" selected>Medium (High Quality)</option>
+                        <option value="large">Large (Best Quality)</option>
+                        <option value="Oriserve/Whisper-Hindi2Hinglish-Prime">Hindi2Hinglish (Recommended)</option>
+                    </select>
+                </div>
+
+                <!-- Language Selection -->
+                <div class="form-group">
+                    <label for="languageSelect">Language</label>
+                    <select id="languageSelect" class="select-input">
+                        <option value="">Auto Detect</option>
+                        <option value="en">English</option>
+                        <option value="hi">Hindi</option>
+                        <option value="ur">Urdu</option>
+                        <option value="es">Spanish</option>
+                    </select>
+                </div>
+
+                <!-- Subtitle Mode -->
+                <div class="form-group">
+                    <label for="modeSelect">Subtitle Mode</label>
+                    <select id="modeSelect" class="select-input">
+                        <option value="oneword" selected>One Word</option>
+                        <option value="twoword">Two Word Punch</option>
+                        <option value="phrase">Phrase Mode</option>
+                    </select>
+                </div>
+            </div>
+
+            <button id="processBtn" class="btn-primary" disabled>
+                Generate Subtitles
+            </button>
+        </div>
+
+        <!-- Progress Section -->
+        <div id="progressCard" class="card progress-card hidden">
+            <div class="card-header">
+                <h2>Processing</h2>
+            </div>
+
+            <div class="progress-container">
+                <div class="progress-bar">
+                    <div id="progressFill" class="progress-fill"></div>
+                </div>
+                <p id="progressText" class="progress-text">0%</p>
+            </div>
+
+            <p id="statusText" class="status-text">Initializing...</p>
+
+            <p style="color: #ff6b6b; font-weight: bold; margin-top: 15px; font-size: 0.9rem;">
+                ⚠️ DO NOT RELOAD this page or the process will be cancelled!
+            </p>
+
+            <button id="cancelBtn" class="btn-secondary" style="margin-top: 15px; background: #ff6b6b;">
+                ❌ Cancel Process
+            </button>
+        </div>
+
+        <!-- Download Section -->
+        <div id="downloadCard" class="card download-card hidden">
+            <div class="card-header">
+                <h2>✅ Complete!</h2>
+            </div>
+
+            <button id="downloadBtn" class="btn-download">
+                Download SRT File
+            </button>
+
+            <button id="resetBtn" class="btn-secondary">
+                Process Another File
+            </button>
+        </div>
+
+        <!-- Instagram Popup -->
+        <div id="instaPopup" class="popup-overlay hidden">
+            <div class="popup-card">
+                <button id="closePopup" class="popup-close">×</button>
+                <h3>Developed by Ambrish</h3>
+                <p>Help me reach 1000 followers! 🚀</p>
+                <p style="font-size: 0.9rem; margin-top: -10px; margin-bottom: 20px; opacity: 0.8;">Get updates on more
+                    free AI tools</p>
+                <a href="https://instagram.com/ambrish.yadav.1" target="_blank" class="btn-instagram">
+                    Follow @ambrish.yadav.1
+                </a>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <footer class="footer">
+            <p>Made with ❤️ by <strong>Ambrish</strong></p>
+        </footer>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+
+</html>