在HTML页面通过JavaScript访问Ollama本地部署的DeepSeek

jike007gt

于 2025-05-26 16:30:32 发布

阅读量319

点赞数 5

CC 4.0 BY-SA版权

文章标签： html javascript 前端

本文链接：https://blog.youkuaiyun.com/jike007gt/article/details/148233456

前排提醒：

1. 操作系统为Windows11

2. 如果你还没有使用Ollama本地部署DeepSeek，可以参考Windows系统上使用Ollama本地部署DeepSeek

3. 顺便解决了 HTML 页面调用 Ollama 服务的跨域问题

通过JavaScript访问本地DeepSeek服务的方式比较简单，可以直接参照以下HTML代码。注意： 要把 MODEL_NAME 修改为自己部署的DeepSeek版本

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地 DeepSeek 对话</title>
    <style>
        :root {
            --primary-color: #2c3e50;
            --hover-color: #34495e;
            --background-color: #f8f9fa;
            --border-color: #dfe3e8;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            line-height: 1.6;
            padding: 1rem;
            background-color: var(--background-color);
        }

        .chat-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 1.5rem;
        }

        .input-group {
            margin-bottom: 1.5rem;
        }

        #input {
            width: 96%;
            padding: 0.8rem;
            border: 2px solid var(--border-color);
            border-radius: 6px;
            resize: vertical;
            min-height: 100px;
            margin-bottom: 1rem;
        }

        #input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
        }

        .btn {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.2s ease;
            font-size: 1rem;
        }

        .btn:hover {
            background: var(--hover-color);
        }

        #response {
            white-space: pre-wrap;
            padding: 1rem;
            margin-top: 1.5rem;
            border: 2px solid var(--border-color);
            border-radius: 6px;
            background: #f8fafc;
            min-height: 100px;
        }

        .loading {
            opacity: 0.6;
            position: relative;
        }

        .loading::after {
            content: "正在思考...";
            color: var(--primary-color);
        }

        @media (max-width: 768px) {
            .chat-container {
                margin: 0 1rem;
                padding: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div class="input-group">
            <textarea 
                id="input" 
                rows="4"
                placeholder="请输入您的问题，例如：如何学习编程？"
            ></textarea>
            <button class="btn" onclick="sendToOllama()">发送问题</button>
        </div>
        <div id="response"></div>
    </div>

    <script>
        const API_ENDPOINT = 'http://127.0.0.1:11434/api/chat';
        const MODEL_NAME = 'deepseek-r1:1.5b';

        async function sendToOllama() {
            const inputEl = document.getElementById('input');
            const responseEl = document.getElementById('response');
            const btnEl = document.querySelector('.btn');
            
            const question = inputEl.value.trim();
            
            if (!question) {
                responseEl.textContent = '请输入有效的问题内容';
                return;
            }

            try {
                btnEl.disabled = true;
                responseEl.classList.add('loading');
                
                const response = await fetch(API_ENDPOINT, {
                    method: 'POST',
                    headers: { 
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        model: MODEL_NAME,
                        messages: [{ 
                            role: "user", 
                            content: question 
                        }],
                        stream: false
                    })
                });

                if (!response.ok) {
                    throw new Error(`HTTP 错误! 状态码: ${response.status}`);
                }

                const data = await response.json();
                responseEl.innerHTML = `
                    <strong>回复：</strong>${data.message.content}
                `;
            } catch (error) {
                console.error('请求失败:', error);
                responseEl.textContent = `请求失败: ${error.message}`;
            } finally {
                btnEl.disabled = false;
                responseEl.classList.remove('loading');
            }
        }
    </script>
</body>
</html>

打开HTML页面后，可以进行对话，如下图所示。

注意： 如果直接双击打开HTML页面，可能会出现跨域（CORS）错误，此时需要在Ollama服务端启用 CORS支持。

第一步： 使用 WIN + R，搜索 “环境”，打开 “编辑系统环境变量”

第二步： 点击 “环境变量” 进入环境变量设置界面

第三步： 在系统变量这里，点击 “新建”

第四步： 变量名设置为 OLLAMA_ORIGINS，变量值设置为 *，然后一直点击确定，保存环境变量设置

第五步： 重启Ollama服务，跨域（CORS）错误即可解决