Skip to content

Commit 8c026bd

Browse files
simonwsimonw
authored
System prompt and copy-out JSON
https://gist.github.com/simonw/9ed87231c365164d6b7328aa04a16b59
1 parent 4b61d05 commit 8c026bd

File tree

1 file changed

+73
-10
lines changed

1 file changed

+73
-10
lines changed

‎openai-audio-output.html

+73-10
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>OpenAI Text-to-Speech</title>
6+
<title>Prompt GPT-4o audio</title>
77
<style>
88
body {
99
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@@ -27,12 +27,23 @@
2727
}
2828
textarea {
2929
width: 100%;
30-
min-height: 150px;
3130
padding: 12px;
3231
font-size: 16px;
3332
border: 1px solid #ccc;
3433
border-radius: 4px;
3534
resize: vertical;
35+
font-family: inherit;
36+
}
37+
#systemPrompt {
38+
min-height: 60px;
39+
}
40+
#promptInput {
41+
min-height: 150px;
42+
}
43+
#responseJson {
44+
min-height: 200px;
45+
font-family: monospace;
46+
background: #f5f5f5;
3647
}
3748
select {
3849
padding: 8px 12px;
@@ -78,15 +89,31 @@
7889
color: #666;
7990
font-style: italic;
8091
}
92+
.json-container {
93+
margin-top: 20px;
94+
}
95+
.copy-button {
96+
margin-top: 8px;
97+
background: #4CAF50;
98+
}
99+
.copy-button:hover:not(:disabled) {
100+
background: #45a049;
101+
}
81102
</style>
82103
</head>
83-
<body><h1>Prompt gpt-4o-audio-preview</h1>
104+
<body>
105+
<h1>Prompt GPT-4o audio</h1>
84106
<div class="info">
85107
Enter a prompt below and execute against <code>gpt-4o-audio-preview</code> to hear the results.
86108
</div>
87109

88110
<div class="input-group">
111+
<label for="systemPrompt">System Prompt (optional):</label>
112+
<textarea id="systemPrompt" placeholder="Enter system prompt here..." aria-label="System prompt"></textarea>
113+
114+
<label for="promptInput">User Prompt:</label>
89115
<textarea id="promptInput" placeholder="Enter your text here..." aria-label="Input text"></textarea>
116+
90117
<select id="voiceSelect" aria-label="Voice selection">
91118
<option value="alloy">Alloy</option>
92119
<option value="echo">Echo</option>
@@ -105,20 +132,31 @@
105132
<div id="transcript" class="transcript"></div>
106133
</div>
107134

135+
<div id="jsonContainer" class="json-container" style="display: none;">
136+
<h3>API Response:</h3>
137+
<textarea id="responseJson" readonly></textarea>
138+
<button id="copyJsonBtn" class="copy-button">Copy to clipboard</button>
139+
</div>
140+
108141
<script>
109142
const promptInput = document.getElementById('promptInput');
143+
const systemPrompt = document.getElementById('systemPrompt');
110144
const voiceSelect = document.getElementById('voiceSelect');
111145
const submitBtn = document.getElementById('submitBtn');
112146
const errorDiv = document.getElementById('error');
113147
const playerContainer = document.getElementById('playerContainer');
114148
const audioPlayer = document.getElementById('audioPlayer');
115149
const downloadBtn = document.getElementById('downloadBtn');
116150
const transcriptDiv = document.getElementById('transcript');
151+
const jsonContainer = document.getElementById('jsonContainer');
152+
const responseJson = document.getElementById('responseJson');
153+
const copyJsonBtn = document.getElementById('copyJsonBtn');
117154

118155
function showError(message) {
119156
errorDiv.textContent = message;
120157
errorDiv.style.display = 'block';
121158
playerContainer.style.display = 'none';
159+
jsonContainer.style.display = 'none';
122160
}
123161

124162
function clearError() {
@@ -136,6 +174,21 @@
136174
return apiKey;
137175
}
138176

177+
copyJsonBtn.addEventListener('click', async () => {
178+
try {
179+
await navigator.clipboard.writeText(responseJson.value);
180+
const originalText = copyJsonBtn.textContent;
181+
copyJsonBtn.textContent = 'Copied!';
182+
copyJsonBtn.disabled = true;
183+
setTimeout(() => {
184+
copyJsonBtn.textContent = originalText;
185+
copyJsonBtn.disabled = false;
186+
}, 1500);
187+
} catch (err) {
188+
console.error('Failed to copy text:', err);
189+
}
190+
});
191+
139192
async function submitToAPI() {
140193
const apiKey = getAPIKey();
141194
if (!apiKey) {
@@ -146,7 +199,18 @@
146199
const voice = voiceSelect.value;
147200
submitBtn.textContent = 'Processing...';
148201
submitBtn.disabled = true;
149-
const prompt = promptInput.value;
202+
203+
const messages = [];
204+
if (systemPrompt.value.trim()) {
205+
messages.push({
206+
"role": "system",
207+
"content": systemPrompt.value
208+
});
209+
}
210+
messages.push({
211+
"role": "user",
212+
"content": promptInput.value
213+
});
150214

151215
const payload = {
152216
"model": "gpt-4o-audio-preview",
@@ -158,12 +222,7 @@
158222
"voice": voice,
159223
"format": "wav"
160224
},
161-
"messages": [
162-
{
163-
"role": "user",
164-
"content": prompt
165-
}
166-
]
225+
"messages": messages
167226
};
168227

169228
try {
@@ -182,6 +241,10 @@
182241
throw new Error(data.error?.message || 'API request failed');
183242
}
184243

244+
// Display raw JSON response
245+
responseJson.value = JSON.stringify(data, null, 2);
246+
jsonContainer.style.display = 'block';
247+
185248
// Extract audio data and transcript
186249
const audioData = data.choices[0].message.audio.data;
187250
const transcript = data.choices[0].message.audio.transcript;

0 commit comments

Comments
 (0)