cdupland commited on
Commit
1abc475
·
verified ·
1 Parent(s): 2bfc369

Update README.md

Browse files
Files changed (1) hide show
  1. README.md +87 -0
README.md CHANGED
@@ -45,3 +45,90 @@ Bien que ce code utilise l'API `MediaDevices` et `MediaRecorder`, il existe d'au
45
 
46
  * **API Web Audio** : Cette API est beaucoup plus avancée et offre un contrôle très granulaire sur le son. Elle est utile pour des tâches telles que la synthèse sonore, l'ajout d'effets (comme la réverbération), et la visualisation des ondes sonores.
47
  * **Élément `<audio>`** : Le plus simple de tous, cet élément HTML sert uniquement à la lecture de fichiers audio. Il est parfait pour une utilisation basique comme la lecture de l'enregistrement après l'arrêt, comme c'est le cas dans le code fourni.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
45
 
46
  * **API Web Audio** : Cette API est beaucoup plus avancée et offre un contrôle très granulaire sur le son. Elle est utile pour des tâches telles que la synthèse sonore, l'ajout d'effets (comme la réverbération), et la visualisation des ondes sonores.
47
  * **Élément `<audio>`** : Le plus simple de tous, cet élément HTML sert uniquement à la lecture de fichiers audio. Il est parfait pour une utilisation basique comme la lecture de l'enregistrement après l'arrêt, comme c'est le cas dans le code fourni.
48
+
49
+
50
+ ### 🛠️ Intégration de l'API Whisper Côté Client
51
+
52
+ Pour intégrer l'API OpenAI Whisper directement dans une page web, vous devez envoyer une requête **`POST`** en utilisant le format `multipart/form-data`. Le code HTML fourni est déjà configuré pour cela. Voici une note technique expliquant les modifications à apporter au code JavaScript pour réaliser l'appel.
53
+
54
+ -----
55
+
56
+ ### 📝 Note Technique : Appel direct à l'API Whisper
57
+
58
+ #### 1\. Préparation de la Requête
59
+
60
+ L'API Whisper requiert deux éléments principaux dans le corps de la requête `multipart/form-data`:
61
+
62
+ * `file` : Le fichier audio à transcrire.
63
+ * `model` : Le nom du modèle à utiliser, qui doit être `"whisper-1"`.
64
+
65
+ De plus, une **clé API** est nécessaire pour l'authentification. Elle doit être incluse dans l'en-tête de la requête sous la forme `Authorization: Bearer VOTRE_CLÉ_API`.
66
+
67
+ #### 2\. Modification du Code JavaScript
68
+
69
+ Pour adapter la fonction `sendAudioToApi` afin qu'elle envoie la requête directement à l'API Whisper, suivez ces étapes :
70
+
71
+ a. **Mettez à jour l'URL de l'API.**
72
+ L'endpoint de l'API Whisper est `https://api.openai.com/v1/audio/transcriptions` (pour la transcription) ou `https://api.openai.com/v1/audio/translations` (pour la traduction). Assurez-vous que l'URL dans la variable `endpoint` est correcte.
73
+
74
+ b. **Construisez le corps de la requête.**
75
+ Ajoutez le modèle `"whisper-1"` et le fichier audio (`blob`) au `FormData` que la fonction prépare déjà.
76
+
77
+ c. **Ajoutez les en-têtes d'authentification.**
78
+ L'en-tête `Content-Type` sera automatiquement géré par le navigateur pour le `multipart/form-data`, mais vous devez explicitement ajouter l'en-tête `Authorization`.
79
+
80
+ Voici la fonction `sendAudioToApi` modifiée :
81
+
82
+ ```javascript
83
+ async function sendAudioToApi(blob) {
84
+ // L'endpoint pour la traduction est https://api.openai.com/v1/audio/translations
85
+ const endpoint = "https://api.openai.com/v1/audio/translations";
86
+ const apiKey = "VOTRE_CLÉ_API_OPENAI"; // Mettez votre clé ici
87
+ if (!apiKey) {
88
+ setStatus("Clé API manquante. Impossible d'envoyer la requête.");
89
+ return;
90
+ }
91
+
92
+ setStatus("Envoi de l'audio à l'API OpenAI...");
93
+
94
+ const form = new FormData();
95
+ const extension = blob.type.includes('wav') ? 'wav' : (blob.type.includes('mpeg') ? 'mp3' : 'webm');
96
+ const filename = `recording-${Date.now()}.${extension}`;
97
+
98
+ form.append('file', blob, filename);
99
+ form.append('model', 'whisper-1');
100
+
101
+ try {
102
+ const response = await fetch(endpoint, {
103
+ method: 'POST',
104
+ headers: {
105
+ 'Authorization': `Bearer ${apiKey}`,
106
+ },
107
+ body: form,
108
+ });
109
+
110
+ if (!response.ok) {
111
+ const errorData = await response.json();
112
+ setStatus(`Échec de l'envoi : ${response.status} - ${errorData.error.message}`);
113
+ throw new Error('Échec de l\'envoi');
114
+ }
115
+
116
+ const result = await response.json();
117
+ setStatus('Envoi réussi');
118
+
119
+ if (result && result.text) {
120
+ displayTranscription(result.text);
121
+ } else {
122
+ log('Aucune transcription trouvée dans la réponse de l\'API');
123
+ }
124
+
125
+ return result;
126
+ } catch (err) {
127
+ setStatus('Erreur lors de l\'envoi à l\'API');
128
+ console.error(err);
129
+ throw err;
130
+ }
131
+ }
132
+ ```
133
+
134
+ **Remarque** : Si vous souhaitez faire une traduction au lieu d'une transcription, utilisez l'endpoint `https://api.openai.com/v1/audio/translations`. La structure de la requête reste la même. L'API retourne un objet JSON avec la clé `"text"` contenant la transcription ou la traduction.