| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>API Interaction</title> |
| </head> |
| <body> |
|
|
| <div id="api-info"> |
| <h2>API Information</h2> |
| <p>Current URL: <span id="current-url"></span></p> |
| <p>API Usage Instructions:</p> |
| <p>1. Enter your message in the textarea.</p> |
| <p>2. Click the "Send Chat Message" button or press Ctrl+Enter to send the message to the server.</p> |
| <p>3. The response will be displayed below the button.</p> |
| </div> |
|
|
| <h1>Test Localhost API</h1> |
|
|
| <h2>Chat Completion</h2> |
| <textarea id="chat-input" rows="4" cols="50" placeholder="Enter your message here..."></textarea> |
| <button onclick="testChatAPI()">Send Chat Message</button> |
| <pre id="chat-result"></pre> |
|
|
| <h2>Audio Transcription</h2> |
| <input type="file" id="audio-file" /> |
| <button onclick="testWhisperAPI()">Upload Audio</button> |
| <pre id="whisper-result"></pre> |
|
|
| <script> |
| |
| document.getElementById('current-url').textContent = window.location.href; |
| |
| |
| async function testChatAPI() { |
| const messageContent = document.getElementById('chat-input').value; |
| |
| const response = await fetch('/openai/v1/chat/completions', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json' |
| }, |
| body: JSON.stringify({ |
| messages: [{ role: 'user', content: messageContent }], |
| model: 'llama3-70b-8192' |
| }) |
| }); |
| |
| const data = await response.json(); |
| document.getElementById('chat-result').textContent = data.messages ? data.messages[0].content : JSON.stringify(data, null, 2); |
| } |
| |
| async function testWhisperAPI() { |
| const fileInput = document.getElementById('audio-file'); |
| const formData = new FormData(); |
| formData.append('file', fileInput.files[0]); |
| formData.append('model', 'whisper-large-v3'); |
| |
| const response = await fetch('/openai/v1/audio/transcriptions', { |
| method: 'POST', |
| body: formData |
| }); |
| |
| const data = await response.json(); |
| document.getElementById('whisper-result').textContent = JSON.stringify(data, null, 2); |
| } |
| |
| document.getElementById('chat-input').addEventListener('keydown', async (event) => { |
| if (event.ctrlKey && event.key === 'Enter') { |
| event.preventDefault(); |
| await testChatAPI(); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
