Sveltekit调用OpenAI生成内容

创建工程

pnpx sv create demo
cd demo
pnpm i openai

安装openai

cd demo
pnpm i openai

设置.env

OPENAI_API_KEY="sk-xxxx"
OPENAI_BASE_URL="https://api.fe8.cn/v1"

编辑src/api/chat/+server.js

import { OpenAI } from 'openai';
import { OPENAI_API_KEY, OPENAI_BASE_URL } from '$env/static/private';

const openai = new OpenAI({
    apiKey: OPENAI_API_KEY,
    baseURL: OPENAI_BASE_URL
});

export async function POST({ request }) {
    try {
        const { prompt } = await request.json();

        const completion = await openai.chat.completions.create({
            model: "gpt-4o-mini",
            messages: [{ role: "user", content: prompt }]
        });

        return new Response(JSON.stringify({
            result: completion.choices[0].message.content
        }), {
            status: 200,
            headers: { 'Content-Type': 'application/json' }
        });

    } catch (error) {
        return new Response(JSON.stringify({
            error: error.message
        }), {
            status: 500,
            headers: { 'Content-Type': 'application/json' }
        });
    }
}

编辑+page.svelte

<script>
    let prompt = "";
    let result = "";
    let isLoading = false;
    let error = "";

    async function handleSubmit() {
        isLoading = true;
        error = "";
        try {
            const response = await fetch("/api/chat", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ prompt }),
            });

            if (!response.ok) throw new Error("请求失败");

            const data = await response.json();
            if (data.error) throw new Error(data.error);

            result = data.result;
        } catch (err) {
            error = err.message;
        } finally {
            isLoading = false;
        }
    }
</script>

<main>
    <form on:submit|preventDefault={handleSubmit}>
        <textarea bind:value={prompt} placeholder="输入提示词..."></textarea>
        <button type="submit" disabled={isLoading}>
            {isLoading ? "生成中..." : "生成"}
        </button>
    </form>

    {#if error}
        <div class="error">{error}</div>
    {/if}

    {#if result}
        <div class="result">{result}</div>
    {/if}
</main>

<style>
    textarea {
        width: 100%;
        height: 100px;
        margin: 1rem 0;
    }
    .error {
        color: red;
    }
    .result {
        white-space: pre-wrap;
    }
</style>

编辑运行

pnpm build
pnpm preview