Ability to select a model

simonw · web-flow · commit e717abc51fbf · 2024-12-17T13:48:16.000-08:00
https://gist.github.com/simonw/11f34f256fbeebda741be384b07303e7
diff --git a/openai-audio-output.html b/openai-audio-output.html
@@ -122,12 +122,16 @@
             cursor: pointer;
             text-decoration: underline;
         }
+        .select-group {
+            display: flex;
+            gap: 12px;
+        }
     </style>
 </head>
 <body>
     <h1>Prompt GPT-4o audio</h1>
     <div class="info">
-        Enter a prompt below and execute against <code>gpt-4o-audio-preview</code> to hear the results.
+        Enter a prompt below and execute against the selected model to hear the results.
     </div>
 
     <div class="input-group">
@@ -137,14 +141,21 @@ <h1>Prompt GPT-4o audio</h1>
         <label for="promptInput">User Prompt:</label>
         <textarea id="promptInput" placeholder="Enter your text here..." aria-label="Input text"></textarea>
         
-        <select id="voiceSelect" aria-label="Voice selection">
-            <option value="alloy">Alloy</option>
-            <option value="echo">Echo</option>
-            <option value="fable">Fable</option>
-            <option value="onyx">Onyx</option>
-            <option value="nova">Nova</option>
-            <option value="shimmer">Shimmer</option>
-        </select>
+        <div class="select-group">
+            <select id="modelSelect" aria-label="Model selection">
+                <option value="gpt-4o-audio-preview-2024-12-17">GPT-4o Audio Preview (Dec 17, 2024)</option>
+                <option value="gpt-4o-audio-preview-2024-10-01">GPT-4o Audio Preview (Oct 1, 2024)</option>
+            </select>
+            
+            <select id="voiceSelect" aria-label="Voice selection">
+                <option value="alloy">Alloy</option>
+                <option value="echo">Echo</option>
+                <option value="fable">Fable</option>
+                <option value="onyx">Onyx</option>
+                <option value="nova">Nova</option>
+                <option value="shimmer">Shimmer</option>
+            </select>
+        </div>
         <button id="submitBtn">Generate Speech</button>
     </div>
     
@@ -171,6 +182,7 @@ <h3>API Response:</h3>
     <script>
         const promptInput = document.getElementById('promptInput');
         const systemPrompt = document.getElementById('systemPrompt');
+        const modelSelect = document.getElementById('modelSelect');
         const voiceSelect = document.getElementById('voiceSelect');
         const submitBtn = document.getElementById('submitBtn');
         const errorDiv = document.getElementById('error');
@@ -308,6 +320,7 @@ <h3>API Response:</h3>
                 return;
             }
 
+            const model = modelSelect.value;
             const voice = voiceSelect.value;
             submitBtn.textContent = 'Processing...';
             submitBtn.disabled = true;
@@ -325,7 +338,7 @@ <h3>API Response:</h3>
             });
 
             const payload = {
-                "model": "gpt-4o-audio-preview",
+                "model": model,
                 "modalities": [
                     "text",
                     "audio"
