簡單接入OpenAI的聊天和文生圖API

這里是一個簡單的HTML示例，包含JavaScript代碼，用于封裝OpenAI的聊天接口和文生圖接口。這個示例包括兩個模式：聊天模式和文生圖模式。聊天模式支持流式響應(yīng)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenAI Chat and Text-to-Image Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #output {
            white-space: pre-wrap;
            border: 1px solid #ccc;
            padding: 10px;
            margin-top: 10px;
        }
        #image {
            margin-top: 10px;
        }
        #controls {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h1>OpenAI Chat and Text-to-Image Demo</h1>
    <div id="controls">
        <select id="mode">
            <option value="chat">Chat</option>
            <option value="image">Text-to-Image</option>
        </select>
        <br>
        <textarea id="input" rows="4" cols="50" placeholder="Enter your prompt here..."></textarea>
        <br>
        <button onclick="handleRequest()">Submit</button>
    </div>
    <div id="output"></div>
    <img id="image" style="display:none;" alt="Generated Image">
    
    <script>
        async function handleRequest() {
            const mode = document.getElementById('mode').value;
            const input = document.getElementById('input').value;

            if (mode === 'chat') {
                await handleChatRequest(input);
            } else if (mode === 'image') {
                await handleImageRequest(input);
            }
        }

        async function handleChatRequest(prompt) {
    const outputDiv = document.getElementById('output');
    outputDiv.innerHTML = 'Loading...';

    const response = await fetch('https://api.openai.com/v1/chat/completions', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer sk-g6o******a8T`
        },
        body: JSON.stringify({
            model: 'gpt-4',
            messages: [{ role: 'user', content: prompt }],
            stream: true
        })
    });

    const reader = response.body.getReader();
    const decoder = new TextDecoder();
    outputDiv.innerHTML = '';

    while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        const text = decoder.decode(value, { stream: true });
        const lines = text.split('\n').filter(line => line.trim() !== '');
        for (const line of lines) {
            if (line.startsWith('data: ')) {
                const json = JSON.parse(line.substring(6));
                if (json.choices && json.choices[0].delta && json.choices[0].delta.content) {
                    outputDiv.innerHTML += json.choices[0].delta.content;
                }
            }
        }
    }
}

        async function handleImageRequest(prompt) {
            const outputDiv = document.getElementById('output');
            const image = document.getElementById('image');
            outputDiv.innerHTML = 'Generating image...';
            image.style.display = 'none';

            const response = await fetch('https://api.openai.com/v1/images/generations', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer sk-g6o******a8T`
                },
                body: JSON.stringify({
                    prompt: prompt,
                    n: 1,
                    size: '512x512'
                })
            });

            const data = await response.json();
            if (data.data && data.data.length > 0) {
                outputDiv.innerHTML = 'Image generated:';
                image.src = data.data[0].url;
                image.style.display = 'block';
            } else {
                outputDiv.innerHTML = 'Failed to generate image.';
            }
        }
    </script>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容