通过js调用ollama的api

keyle

发布于 2025-02-19 13:46:03

65800

代码可运行

文章被收录于专栏：礼拜八不工作礼拜八不工作

运行总次数：0

代码可运行

如果你也有这个需求可以参考 ollama 的官方api与本篇文章，官方的例子里很多都是用了curl进行演示。 https://github.com/ollama/ollama/blob/main/docs/api.md

在写脚本之前需要先确认本地的 ollama 网络服务是否正常启动。 http://localhost:11434 通过访问本机的11434端口确定是否ollama的服务正常运行

值得注意的是在浏览器中访问本地 index.html 文件时，一般会遇到 CORS（跨源资源共享）策略限制，导致无法调用本地的 Ollama API，所以你需要在本地搭建一个http服务器，如果没有这个服务器的话，可以使用下面这个VSCode插件。

右键你的html文件启动本地http服务器，现在就可以很方便的调试你的页面，好用推荐。

既然我们已经拿到了官网的API文档，那么下面要做的事很简单，将这个文档丢给deepseek，或者是其他的ai，让打工ai给我们造一个前端界面就用。

下面是我通过chatgtp生成的一个支持连续消息交互的界面。

分析下核心代码，参考了文档中使用curl发送json的测试用例，写了一个post方式提交数据到特定的地址。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>与 Ollama 交互</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #messages {
            border: 1px solid #ccc;
            padding: 10px;
            max-height: 300px;
            overflow-y: auto;
        }
        #inputMessage {
            width: 100%;
            padding: 10px;
            margin-top: 10px;
            box-sizing: border-box;
        }
        #sendButton {
            margin-top: 10px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        #sendButton:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <h1>与 Ollama 交互</h1>
    <div id="messages"></div>
    <textarea id="inputMessage" placeholder="输入你的消息..." rows="3"></textarea>
    <button id="sendButton">发送</button>
    <script>
        const sendButton = document.getElementById('sendButton');
        const inputMessage = document.getElementById('inputMessage');
        const messages = document.getElementById('messages');
        // Ollama 服务的 URL，假设它运行在本机的 11434 端口
        const ollamaApiUrl = 'http://localhost:11434/api/chat';
        sendButton.addEventListener('click', async () => {
            const message = inputMessage.value.trim();
            if (!message) return;
            // 显示用户发送的消息
            addMessage('你：' + message);
            try {
                const response = await fetch(ollamaApiUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        model: 'deepseek-r1:8b',
                        messages: [
                            { role: 'user', content: message }
                        ],
                        stream: false
                    })
                });
                if (response.ok) {
                    const data = await response.json();
                    const reply = data.message && data.message.content ? data.message.content : '无回复内容';
                    addMessage('Ollama：' + reply);
                } else {
                    addMessage('错误：无法与 Ollama 服务通信');
                }
            } catch (error) {
                addMessage('错误：' + error.message);
            }
            inputMessage.value = '';  // 清空输入框
        });
        function addMessage(text) {
            const messageDiv = document.createElement('div');
            messageDiv.textContent = text;
            messages.appendChild(messageDiv);
            messages.scrollTop = messages.scrollHeight; // 滚动到底部
        }
    </script>
</body>
</html>