|
|
<!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> |
|
|
|
