Upload 17 files

App.tsx

@@ -0,0 +1,134 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import { DiarizationEntry } from './types';
+import { processAudioFile } from './services/geminiService';
+import FileUpload from './components/FileUpload';
+import Loader from './components/Loader';
+import DiarizationResult from './components/DiarizationResult';
+import { ResetIcon } from './components/icons';
+import ApiKeyInput from './components/ApiKeyInput';
+
+const App: React.FC = () => {
+  const [apiKey, setApiKey] = useState<string>('');
+  const [useStarFormat, setUseStarFormat] = useState<boolean>(true);
+  const [file, setFile] = useState<File | null>(null);
+  const [diarizationResult, setDiarizationResult] = useState<DiarizationEntry[] | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [loadingMessage, setLoadingMessage] = useState<string>('');
+  const [error, setError] = useState<string | null>(null);
+
+  const isApiKeySet = apiKey.trim() !== '';
+
+  const handleFileSelect = useCallback(async (selectedFile: File) => {
+    if (!isApiKeySet) {
+      setError("Veuillez d'abord fournir une clé API Gemini.");
+      return;
+    }
+    setFile(selectedFile);
+    setIsLoading(true);
+    setError(null);
+    setDiarizationResult(null);
+    setLoadingMessage('Analyse audio en cours... (cela peut prendre un moment)');
+
+    try {
+      const result = await processAudioFile(selectedFile, apiKey);
+      
+      const formattedResult = result.map(entry => ({
+        ...entry,
+        speaker: useStarFormat 
+          ? `*${entry.speaker.replace(/ /g, '_')}` 
+          : entry.speaker,
+      }));
+
+      setDiarizationResult(formattedResult);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'An unexpected error occurred.';
+      setError(errorMessage);
+    } finally {
+      setIsLoading(false);
+      setLoadingMessage('');
+    }
+  }, [apiKey, isApiKeySet, useStarFormat]);
+
+  const speakerCount = useMemo(() => {
+    if (!diarizationResult) return 0;
+    const speakers = new Set(diarizationResult.map(entry => entry.speaker));
+    return speakers.size;
+  }, [diarizationResult]);
+
+  const handleReset = () => {
+    setFile(null);
+    setDiarizationResult(null);
+    setIsLoading(false);
+    setError(null);
+    setLoadingMessage('');
+  };
+
+  const renderContent = () => {
+    if (isLoading) {
+      return <Loader message={loadingMessage} />;
+    }
+    if (error) {
+      return (
+        <div className="text-center text-red-400 bg-red-900/50 p-4 rounded-lg">
+          <p className="font-bold">Erreur</p>
+          <p>{error}</p>
+        </div>
+      );
+    }
+    if (diarizationResult && file) {
+      return <DiarizationResult result={diarizationResult} fileName={file.name} speakerCount={speakerCount} useStarFormat={useStarFormat} />;
+    }
+    // L'upload est désactivé si la clé n'est pas fournie
+    return <FileUpload onFileSelect={handleFileSelect} isLoading={isLoading || !isApiKeySet} />;
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-gray-100 flex flex-col items-center justify-center p-4 sm:p-6 lg:p-8">
+      <div className="w-full max-w-4xl text-center mb-8">
+        <h1 className="text-4xl sm:text-5xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
+          Diarisation de MP3 par IA
+        </h1>
+        <p className="mt-4 text-lg text-gray-400">
+          Fournissez votre clé API Gemini, puis téléchargez un MP3 pour obtenir une analyse des locuteurs.
+        </p>
+      </div>
+      
+      {!diarizationResult && (
+        <div className="w-full max-w-2xl mb-8 p-6 bg-gray-800/50 border border-gray-700 rounded-xl">
+          <h2 className="text-xl font-bold mb-4 text-center">Configuration</h2>
+          <ApiKeyInput apiKey={apiKey} setApiKey={setApiKey} />
+          <div className="mt-4 flex items-center justify-center">
+            <input
+              type="checkbox"
+              id="star-format"
+              checked={useStarFormat}
+              onChange={(e) => setUseStarFormat(e.target.checked)}
+              className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 bg-gray-700"
+            />
+            <label htmlFor="star-format" className="ml-2 block text-sm text-gray-300">
+              Formater le nom du locuteur (ex: *Locuteur_A)
+            </label>
+          </div>
+        </div>
+      )}
+
+      <main className="w-full max-w-4xl flex-grow flex items-center justify-center">
+        {renderContent()}
+      </main>
+
+      {(diarizationResult || error) && !isLoading && (
+        <footer className="mt-8">
+          <button
+            onClick={handleReset}
+            className="flex items-center gap-2 px-6 py-2 bg-gray-700 text-white font-semibold rounded-lg hover:bg-gray-600 transition-colors duration-300"
+          >
+            <ResetIcon className="w-5 h-5" />
+            Analyser un autre fichier
+          </button>
+        </footer>
+      )}
+    </div>
+  );
+};
+
+export default App;

README.md

@@ -1,10 +1,20 @@
----
-title: Diarization
-emoji: 🐨
-colorFrom: blue
-colorTo: pink
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+<div align="center">
+<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+</div>
+
+# Run and deploy your AI Studio app
+
+This contains everything you need to run your app locally.
+
+View your app in AI Studio: https://ai.studio/apps/drive/1IeRaNSyuTNvryQryVlmlLbOVCeMVuzor
+
+## Run Locally
+
+**Prerequisites:**  Node.js
+
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

components/ApiKeyInput.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+interface ApiKeyInputProps {
+  apiKey: string;
+  setApiKey: (key: string) => void;
+}
+
+const ApiKeyInput: React.FC<ApiKeyInputProps> = ({ apiKey, setApiKey }) => {
+  return (
+    <div className="space-y-3">
+      <label htmlFor="api-key" className="block text-sm font-medium text-gray-300">
+        Votre Clé API Gemini
+      </label>
+      <input
+        type="password"
+        id="api-key"
+        value={apiKey}
+        onChange={(e) => setApiKey(e.target.value)}
+        className="block w-full px-3 py-2 bg-gray-900 border border-gray-600 rounded-md shadow-sm placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm text-gray-200"
+        placeholder="Entrez votre clé API ici"
+      />
+      <p className="text-xs text-gray-400 text-center">
+        Votre clé est envoyée de manière sécurisée et n'est pas stockée. 
+        <a 
+          href="https://aistudio.google.com/app/apikey" 
+          target="_blank" 
+          rel="noopener noreferrer"
+          className="text-blue-400 hover:underline ml-1"
+        >
+          Obtenez votre clé API sur Google AI Studio.
+        </a>
+      </p>
+    </div>
+  );
+};
+
+export default ApiKeyInput;

components/DiarizationResult.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { DiarizationEntry } from '../types';
+import { ExportIcon } from './icons';
+
+interface DiarizationResultProps {
+  result: DiarizationEntry[];
+  fileName: string;
+  speakerCount: number;
+  useStarFormat: boolean;
+}
+
+const speakerColors: { [key: string]: string } = {
+  'Locuteur A': 'bg-blue-900/50 border-blue-700',
+  '*Locuteur_A': 'bg-blue-900/50 border-blue-700',
+  'Locuteur B': 'bg-purple-900/50 border-purple-700',
+  '*Locuteur_B': 'bg-purple-900/50 border-purple-700',
+  'Locuteur C': 'bg-green-900/50 border-green-700',
+  '*Locuteur_C': 'bg-green-900/50 border-green-700',
+  'Locuteur D': 'bg-indigo-900/50 border-indigo-700',
+  '*Locuteur_D': 'bg-indigo-900/50 border-indigo-700',
+};
+
+const defaultColor = 'bg-gray-700/50 border-gray-600';
+
+const DiarizationResult: React.FC<DiarizationResultProps> = ({ result, fileName, speakerCount, useStarFormat }) => {
+  const getSpeakerColor = (speaker: string) => {
+    // Retirer le formatage pour trouver la couleur de base
+    const baseSpeaker = speaker.replace(/^\*/, '').replace(/_/g, ' ');
+    return speakerColors[baseSpeaker] || defaultColor;
+  };
+
+  const handleExport = () => {
+    const header = `Résultat de la Diarisation pour le fichier : ${fileName}\n`;
+    const stats = `Nombre de locuteurs détectés : ${speakerCount}\n\n`;
+    const content = result
+      .map(entry => {
+        const prefix = useStarFormat ? '\n' : '';
+        return `${prefix}[${entry.timestamp}] ${entry.speaker}: ${entry.text}`;
+      })
+      .join('\n');
+    
+    const fullText = header + stats + content;
+
+    const blob = new Blob([fullText], { type: 'text/plain;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    const safeFileName = fileName.replace(/\.[^/.]+$/, "");
+    link.download = `${safeFileName}-diarisation.txt`;
+    
+    document.body.appendChild(link);
+    link.click();
+    
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className="w-full max-w-4xl mx-auto bg-gray-900/50 rounded-xl shadow-lg border border-gray-700 overflow-hidden">
+      <div className="p-4 bg-gray-800 border-b border-gray-700 flex justify-between items-center">
+        <div>
+            <h2 className="text-lg font-bold text-white">Résultat de la Diarisation</h2>
+            <p className="text-sm text-gray-400 truncate">Fichier : {fileName} | <span className="font-semibold">{speakerCount} locuteur(s) détecté(s)</span></p>
+        </div>
+        <button
+            onClick={handleExport}
+            className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-500 transition-colors duration-300"
+            aria-label="Exporter le résultat au format texte"
+        >
+            <ExportIcon className="w-5 h-5" />
+            Exporter
+        </button>
+      </div>
+      <div className="p-4 md:p-6 space-y-4 h-[60vh] overflow-y-auto">
+        {result.map((entry, index) => (
+          <div key={index} className={`flex items-start gap-4 ${useStarFormat ? 'mt-3' : ''}`}>
+            <div className={`flex-shrink-0 w-24 text-right font-mono text-sm text-gray-400`}>
+                [{entry.timestamp}]
+            </div>
+            <div className={`relative w-full p-3 rounded-lg border ${getSpeakerColor(entry.speaker)}`}>
+               <div className="font-semibold text-white mb-1">{entry.speaker}</div>
+              <p className="text-gray-300 whitespace-pre-wrap">{entry.text}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default DiarizationResult;

components/FileUpload.tsx

@@ -0,0 +1,71 @@
+import React, { useRef } from 'react';
+import { MusicIcon } from './icons';
+
+interface FileUploadProps {
+  onFileSelect: (file: File) => void;
+  isLoading: boolean;
+}
+
+const FileUpload: React.FC<FileUploadProps> = ({ onFileSelect, isLoading }) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      onFileSelect(file);
+    }
+  };
+
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (isLoading) return;
+    const file = event.dataTransfer.files?.[0];
+    if (file && file.type === 'audio/mpeg') {
+      onFileSelect(file);
+    }
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  const handleClick = () => {
+    if (isLoading) return;
+    fileInputRef.current?.click();
+  };
+
+  const disabledClasses = "opacity-50 cursor-not-allowed";
+  const enabledClasses = "hover:border-blue-500 hover:bg-gray-800/50 cursor-pointer";
+
+  return (
+    <div className="w-full max-w-2xl mx-auto">
+      <div
+        className={`w-full h-64 border-2 border-dashed border-gray-600 rounded-xl flex flex-col items-center justify-center text-gray-400 transition-all duration-300 ${isLoading ? disabledClasses : enabledClasses}`}
+        onClick={handleClick}
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+      >
+        <input
+          type="file"
+          ref={fileInputRef}
+          onChange={handleFileChange}
+          accept=".mp3"
+          className="hidden"
+          disabled={isLoading}
+        />
+        <MusicIcon className="w-16 h-16 mb-4 text-gray-500" />
+        <p className="text-lg font-semibold">
+            {isLoading ? "Veuillez fournir une clé API" : "Déposez votre fichier MP3 ici"}
+        </p>
+        <p>ou</p>
+        <p className={`font-bold ${isLoading ? "" : "text-blue-400"}`}>
+            {isLoading ? "" : "Cliquez pour parcourir"}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default FileUpload;

components/Loader.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+interface LoaderProps {
+    message: string;
+}
+
+const Loader: React.FC<LoaderProps> = ({ message }) => {
+  return (
+    <div className="flex flex-col items-center justify-center space-y-4">
+      <div className="w-16 h-16 border-4 border-blue-400 border-dashed rounded-full animate-spin border-t-transparent"></div>
+      <p className="text-lg text-blue-300">{message}</p>
+    </div>
+  );
+};
+
+export default Loader;

components/icons.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+export const MusicIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M9 18V5l12-2v13" />
+    <circle cx="6" cy="18" r="3" />
+    <circle cx="18" cy="16" r="3" />
+  </svg>
+);
+
+export const ResetIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+    <path d="M3 3v5h5" />
+    <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
+    <path d="M21 21v-5h-5" />
+  </svg>
+);
+
+export const ExportIcon: React.FC<{ className?: string }> = ({ className }) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <polyline points="7 10 12 15 17 10" />
+      <line x1="12" y1="15" x2="12" y2="3" />
+    </svg>
+);

index.html

@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MP3 Speaker Diarization AI</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  <script type="importmap">
+{
+  "imports": {
+    "react": "https://aistudiocdn.com/react@^19.2.0",
+    "react/": "https://aistudiocdn.com/react@^19.2.0/",
+    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
+    "@google/genai": "https://aistudiocdn.com/@google/genai@^1.29.0"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+  <body class="bg-gray-900 text-gray-100">
+    <div id="root"></div>
+    <script type="module" src="/index.tsx"></script>
+  </body>
+</html>

index.tsx

@@ -0,0 +1,16 @@
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "Copy of Copy of MP3 Speaker Diarization AI",
+  "description": "An application that uses AI to perform speaker diarization on an audio file's transcript, identifying who spoke and when.",
+  "requestFramePermissions": []
+}

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "copy-of-copy-of-mp3-speaker-diarization-ai",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "@google/genai": "^1.29.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}

requirements.txt

@@ -0,0 +1,4 @@
+fastapi
+uvicorn
+python-multipart
+google-generativeai

services/geminiService.ts

@@ -0,0 +1,38 @@
+import { DiarizationEntry } from '../types';
+
+/**
+ * Cette fonction envoie le fichier audio et la clé API de l'utilisateur au backend.
+ * @param file Le fichier MP3 à analyser.
+ * @param apiKey La clé API Gemini fournie par l'utilisateur.
+ * @returns Une promesse qui se résout avec le résultat de la diarisation.
+ */
+export async function processAudioFile(file: File, apiKey: string): Promise<DiarizationEntry[]> {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  try {
+    const response = await fetch('/api/diarize', {
+      method: 'POST',
+      headers: {
+        // Transmet la clé API de manière sécurisée dans un en-tête
+        'X-API-KEY': apiKey,
+      },
+      body: formData,
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(`Erreur du serveur (${response.status}): ${errorData.detail || 'Erreur inconnue'}`);
+    }
+
+    const result = await response.json();
+    return result as DiarizationEntry[];
+
+  } catch (error) {
+    console.error("Erreur lors de l'appel au backend pour la diarisation:", error);
+    if (error instanceof Error) {
+      throw new Error(`Échec du traitement du fichier : ${error.message}`);
+    }
+    throw new Error("Une erreur inconnue est survenue lors du traitement du fichier.");
+  }
+}

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "node"
+    ],
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

types.ts

@@ -0,0 +1,6 @@
+
+export interface DiarizationEntry {
+  speaker: string;
+  timestamp: string;
+  text: string;
+}

vite.config.ts

@@ -0,0 +1,23 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      server: {
+        port: 3000,
+        host: '0.0.0.0',
+      },
+      plugins: [react()],
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});