Spaces:

EGuihaire
/

paris-space

Running

App Files Files Community

EGuihaire commited on Apr 11

Commit

562b286

verified ·

1 Parent(s): b83beff

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +402 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Paris Space
-emoji: 🐢
-colorFrom: purple
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: paris-space
+emoji: 🐳
+colorFrom: pink
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,402 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Transcription Audio avec GPT-4</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
+    <style>
+        .dropzone {
+            border: 2px dashed #3b82f6;
+            border-radius: 0.5rem;
+            background: #f8fafc;
+            min-height: 200px;
+            padding: 20px;
+        }
+        .dropzone .dz-message {
+            font-size: 1.25rem;
+            color: #64748b;
+        }
+        .progress-bar {
+            height: 6px;
+            background-color: #e2e8f0;
+            border-radius: 3px;
+            margin-top: 10px;
+        }
+        .progress-bar-fill {
+            height: 100%;
+            border-radius: 3px;
+            background-color: #3b82f6;
+            width: 0%;
+            transition: width 0.3s ease;
+        }
+        .file-item {
+            transition: all 0.3s ease;
+        }
+        .file-item:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+        .loader {
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid #3b82f6;
+            border-radius: 50%;
+            width: 20px;
+            height: 20px;
+            animation: spin 1s linear infinite;
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 8px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div class="container mx-auto px-4 py-8 max-w-4xl">
+        <div class="text-center mb-8">
+            <h1 class="text-3xl font-bold text-gray-800 mb-2">Transcription Audio avec GPT-4</h1>
+            <p class="text-gray-600">Transcrivez vos fichiers audio en texte avec une précision exceptionnelle</p>
+        </div>
+        <div class="bg-white rounded-xl shadow-md p-6 mb-8">
+            <div class="mb-6">
+                <label for="api-key" class="block text-sm font-medium text-gray-700 mb-1">Clé API OpenAI</label>
+                <div class="flex">
+                    <input type="password" id="api-key" placeholder="sk-..."
+                           class="flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                    <button id="toggle-key" class="px-4 py-2 bg-gray-100 border border-l-0 border-gray-300 rounded-r-md hover:bg-gray-200">
+                        👁️
+                    </button>
+                </div>
+                <p class="mt-1 text-xs text-gray-500">Votre clé API n'est jamais envoyée à nos serveurs</p>
+            </div>
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 mb-2">Options de transcription</label>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <label for="language" class="block text-xs text-gray-500 mb-1">Langue</label>
+                        <select id="language" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                            <option value="fr">Français</option>
+                            <option value="en">Anglais</option>
+                            <option value="es">Espagnol</option>
+                            <option value="de">Allemand</option>
+                            <option value="it">Italien</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label for="model" class="block text-xs text-gray-500 mb-1">Modèle</label>
+                        <select id="model" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                            <option value="whisper-1">Whisper (optimisé pour audio)</option>
+                            <option value="gpt-4o">GPT-4 Omni (meilleure précision)</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <div id="dropzone" class="dropzone">
+                <div class="dz-message" data-dz-message>
+                    <div class="flex flex-col items-center justify-center">
+                        <svg class="w-12 h-12 text-blue-500 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
+                        </svg>
+                        <span>Glissez-déposez vos fichiers audio ici</span>
+                        <span class="text-sm text-gray-500 mt-1">ou cliquez pour sélectionner</span>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-4">
+                <div class="flex justify-between items-center mb-2">
+                    <span class="text-sm font-medium text-gray-700">Fichiers en attente</span>
+                    <button id="transcribe-all" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
+                        Transcrire tout
+                    </button>
+                </div>
+                <div id="file-list" class="space-y-2">
+                    <!-- Les fichiers apparaîtront ici -->
+                </div>
+            </div>
+        </div>
+        <div id="results" class="bg-white rounded-xl shadow-md p-6 hidden">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-semibold text-gray-800">Résultats de transcription</h2>
+                <button id="copy-all" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm hover:bg-gray-200">
+                    Copier tout
+                </button>
+            </div>
+            <div id="transcription-results" class="space-y-4">
+                <!-- Les résultats apparaîtront ici -->
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Toggle API key visibility
+            const apiKeyInput = document.getElementById('api-key');
+            const toggleKeyBtn = document.getElementById('toggle-key');
+            toggleKeyBtn.addEventListener('click', function() {
+                if (apiKeyInput.type === 'password') {
+                    apiKeyInput.type = 'text';
+                    toggleKeyBtn.textContent = '🔒';
+                } else {
+                    apiKeyInput.type = 'password';
+                    toggleKeyBtn.textContent = '👁️';
+                }
+            });
+            // Initialize Dropzone
+            Dropzone.autoDiscover = false;
+            const myDropzone = new Dropzone("#dropzone", {
+                url: "/fake-url", // We'll handle the upload manually
+                paramName: "file",
+                maxFilesize: 50, // MB
+                acceptedFiles: "audio/*,video/*,.mp3,.wav,.m4a,.mp4,.ogg",
+                addRemoveLinks: true,
+                autoProcessQueue: false,
+                dictDefaultMessage: "",
+                dictFallbackMessage: "Votre navigateur ne supporte pas le glisser-déposer de fichiers.",
+                dictFileTooBig: "Fichier trop volumineux ({{filesize}}MB). Taille maximale: {{maxFilesize}}MB.",
+                dictInvalidFileType: "Type de fichier non supporté.",
+                dictResponseError: "Le serveur a répondu avec le code {{statusCode}}.",
+                dictCancelUpload: "Annuler",
+                dictUploadCanceled: "Téléchargement annulé.",
+                dictRemoveFile: "Supprimer",
+                dictMaxFilesExceeded: "Vous ne pouvez pas télécharger plus de fichiers."
+            });
+            const fileList = document.getElementById('file-list');
+            const transcribeAllBtn = document.getElementById('transcribe-all');
+            const resultsSection = document.getElementById('results');
+            const transcriptionResults = document.getElementById('transcription-results');
+            const copyAllBtn = document.getElementById('copy-all');
+            let filesToTranscribe = [];
+            // Handle added files
+            myDropzone.on("addedfile", function(file) {
+                filesToTranscribe.push(file);
+                updateFileList();
+                transcribeAllBtn.disabled = filesToTranscribe.length === 0;
+            });
+            // Handle removed files
+            myDropzone.on("removedfile", function(file) {
+                filesToTranscribe = filesToTranscribe.filter(f => f !== file);
+                updateFileList();
+                transcribeAllBtn.disabled = filesToTranscribe.length === 0;
+                // Remove from DOM if exists
+                const fileElement = document.getElementById(`file-${file.upload.uuid}`);
+                if (fileElement) {
+                    fileElement.remove();
+                }
+            });
+            // Update the file list UI
+            function updateFileList() {
+                fileList.innerHTML = '';
+                filesToTranscribe.forEach(file => {
+                    const fileElement = document.createElement('div');
+                    fileElement.id = `file-${file.upload.uuid}`;
+                    fileElement.className = 'file-item bg-gray-50 rounded-lg p-3 flex justify-between items-center';
+                    fileElement.innerHTML = `
+                        <div class="flex items-center">
+                            <svg class="w-5 h-5 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"></path>
+                            </svg>
+                            <span class="text-sm font-medium">${file.name}</span>
+                            <span class="text-xs text-gray-500 ml-2">(${(file.size / (1024 * 1024)).toFixed(2)} MB)</span>
+                        </div>
+                        <div class="flex items-center">
+                            <button class="transcribe-btn px-3 py-1 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700 mr-2" data-file-id="${file.upload.uuid}">
+                                Transcrire
+                            </button>
+                            <button class="remove-btn text-gray-500 hover:text-red-500" data-file-id="${file.upload.uuid}">
+                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+                                </svg>
+                            </button>
+                        </div>
+                    `;
+                    fileList.appendChild(fileElement);
+                    // Add event listeners to the buttons
+                    fileElement.querySelector('.transcribe-btn').addEventListener('click', () => transcribeFile(file));
+                    fileElement.querySelector('.remove-btn').addEventListener('click', () => {
+                        myDropzone.removeFile(file);
+                    });
+                });
+            }
+            // Transcribe a single file
+            async function transcribeFile(file) {
+                const apiKey = apiKeyInput.value.trim();
+                if (!apiKey) {
+                    alert('Veuillez entrer votre clé API OpenAI');
+                    return;
+                }
+                const language = document.getElementById('language').value;
+                const model = document.getElementById('model').value;
+                const fileElement = document.getElementById(`file-${file.upload.uuid}`);
+                if (!fileElement) return;
+                const transcribeBtn = fileElement.querySelector('.transcribe-btn');
+                transcribeBtn.disabled = true;
+                transcribeBtn.innerHTML = '<span class="loader"></span> Traitement...';
+                try {
+                    // In a real app, you would upload the file to your server first
+                    // Then your server would call the OpenAI API
+                    // Here we're simulating the process with a timeout
+                    // Simulate upload progress
+                    let progress = 0;
+                    const progressInterval = setInterval(() => {
+                        progress += Math.random() * 10;
+                        if (progress >= 90) clearInterval(progressInterval);
+                        transcribeBtn.innerHTML = `<span class="loader"></span> Upload ${Math.min(100, Math.round(progress))}%`;
+                    }, 300);
+                    // Simulate API call to OpenAI
+                    const response = await simulateOpenAICall(apiKey, file, language, model);
+                    clearInterval(progressInterval);
+                    transcribeBtn.innerHTML = 'Terminé ✓';
+                    // Show results
+                    showTranscriptionResult(file.name, response);
+                    // Remove file from list after a delay
+                    setTimeout(() => {
+                        myDropzone.removeFile(file);
+                    }, 2000);
+                } catch (error) {
+                    console.error('Error:', error);
+                    transcribeBtn.innerHTML = 'Erreur';
+                    alert('Une erreur est survenue lors de la transcription: ' + error.message);
+                }
+            }
+            // Simulate OpenAI API call (replace with actual API call in production)
+            function simulateOpenAICall(apiKey, file, language, model) {
+                return new Promise((resolve) => {
+                    setTimeout(() => {
+                        // This is a mock response - in a real app you would call:
+                        // const formData = new FormData();
+                        // formData.append('file', file);
+                        // formData.append('model', 'whisper-1');
+                        // formData.append('language', language);
+                        // const response = await fetch('https://api.openai.com/v1/audio/transcriptions', {
+                        //     method: 'POST',
+                        //     headers: {
+                        //         'Authorization': `Bearer ${apiKey}`
+                        //     },
+                        //     body: formData
+                        // });
+                        // const data = await response.json();
+                        // Mock data based on file name
+                        const mockText = `Ceci est une transcription simulée du fichier ${file.name}.
+Les systèmes de transcription automatique comme Whisper et GPT-4 offrent des résultats de plus en plus précis. Cette démo montre l'interface utilisateur, mais dans une application réelle, vous appelleriez l'API OpenAI pour obtenir une vraie transcription.
+La qualité de la transcription dépend de plusieurs facteurs :
+- La qualité de l'enregistrement audio
+- La présence de bruit de fond
+- La complexité du vocabulaire utilisé
+- L'accent des locuteurs
+Pour une meilleure précision, utilisez des fichiers audio de haute qualité et spécifiez la langue correcte.`;
+                        resolve({ text: mockText });
+                    }, 3000);
+                });
+            }
+            // Show transcription result
+            function showTranscriptionResult(filename, result) {
+                resultsSection.classList.remove('hidden');
+                const resultElement = document.createElement('div');
+                resultElement.className = 'bg-gray-50 rounded-lg p-4';
+                resultElement.innerHTML = `
+                    <div class="flex justify-between items-center mb-2">
+                        <h3 class="font-medium text-blue-600">${filename}</h3>
+                        <button class="copy-btn px-2 py-1 bg-gray-200 text-gray-700 rounded text-xs hover:bg-gray-300 flex items-center">
+                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path>
+                            </svg>
+                            Copier
+                        </button>
+                    </div>
+                    <div class="text-sm text-gray-700 whitespace-pre-line transcription-text">${result.text}</div>
+                `;
+                transcriptionResults.appendChild(resultElement);
+                // Add copy button functionality
+                resultElement.querySelector('.copy-btn').addEventListener('click', () => {
+                    const textToCopy = resultElement.querySelector('.transcription-text').textContent;
+                    navigator.clipboard.writeText(textToCopy).then(() => {
+                        const btn = resultElement.querySelector('.copy-btn');
+                        btn.innerHTML = '<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> Copié!';
+                        setTimeout(() => {
+                            btn.innerHTML = '<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path></svg> Copier';
+                        }, 2000);
+                    });
+                });
+            }
+            // Transcribe all files
+            transcribeAllBtn.addEventListener('click', async () => {
+                const apiKey = apiKeyInput.value.trim();
+                if (!apiKey) {
+                    alert('Veuillez entrer votre clé API OpenAI');
+                    return;
+                }
+                transcribeAllBtn.disabled = true;
+                transcribeAllBtn.innerHTML = '<span class="loader"></span> Traitement...';
+                // Process files sequentially
+                for (const file of [...filesToTranscribe]) {
+                    await transcribeFile(file);
+                }
+                transcribeAllBtn.innerHTML = 'Tout transcrire';
+            });
+            // Copy all transcriptions
+            copyAllBtn.addEventListener('click', () => {
+                const allTexts = Array.from(document.querySelectorAll('.transcription-text'))
+                    .map(el => el.textContent)
+                    .join('\n\n');
+                navigator.clipboard.writeText(allTexts).then(() => {
+                    copyAllBtn.textContent = 'Tout copié!';
+                    setTimeout(() => {
+                        copyAllBtn.textContent = 'Copier tout';
+                    }, 2000);
+                });
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=EGuihaire/paris-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>