接入deepseek的html代码下载-我要自学网

文章分类选择

电脑办公平面设计室内设计室外设计机械设计工业自动化影视动画程序开发网页设计会计课程兴趣成长 AIGC

接入deepseek的html代码下载

发布时间:2025-02-13 11:58 [ 我要自学网原创 ] 发布人: samohu 阅读: 1775

最近deepseek火遍全球。有人会想到如果是直接做一个简单的h5页面就可以进行提问，不需要deepseek访问网站或app，如何做到呢？以下是展示的效果和代码

以下是一个简单的接入DeepSeek服务的HTML代码示例，包含基础的API调用和界面交互：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DeepSeek接入示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .container {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
        }
        input, button {
            padding: 10px;
            margin: 5px;
            border-radius: 4px;
        }
        input {
            width: 70%;
            border: 1px solid #ddd;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        #result {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #eee;
            border-radius: 4px;
            min-height: 100px;
        }
        .loading {
            color: #666;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>DeepSeek 问答演示</h2>
        <input type="text" id="questionInput" placeholder="输入您的问题...">
        <button onclick="askDeepSeek()">提问</button>
        <div id="result"></div>
    </div>

    <script>
        // 替换为您的实际API密钥
        const API_KEY = 'YOUR_DEEPSEEK_API_KEY';
        const API_URL = 'https://api.deepseek.com/v1/chat/completions'; // 假设的API地址

        async function askDeepSeek() {
            const question = document.getElementById('questionInput').value;
            const resultDiv = document.getElementById('result');

            if (!question) {
                alert('请输入问题');
                return;
            }

            resultDiv.innerHTML = '<div class="loading">思考中...</div>';

            try {
                const response = await fetch(API_URL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${API_KEY}`
                    },
                    body: JSON.stringify({
                        model: "deepseek-chat", // 根据实际模型修改
                        messages: [{
                            role: "user",
                            content: question
                        }]
                    })
                });

                const data = await response.json();

                if (response.ok) {
                    const answer = data.choices[0].message.content;
                    resultDiv.innerHTML = `<strong>答案：</strong>${answer}`;
                } else {
                    resultDiv.innerHTML = `错误：${data.error.message}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `请求失败：${error.message}`;
            }
        }
    </script>
</body>
</html>

重要说明：

需要替换的内容：

将 YOUR_DEEPSEEK_API_KEY 替换为您实际的API密钥

api密钥访问，以下网址进行获取https://www.deepseek.com，打开网址选择”api开放平台“

如下图所示

HTML基础视频教程

我要自学网商城 ￥30 元

进入购买

上一篇: 为什么前端是最适合设计师学习的编程技能？

文章评论

0 条评论按热度排序按时间排序 0/350

遵守中华人民共和国的各项道德法规，
承担因您的行为而导致的法律责任，
本站有权保留或删除有争议评论。
参与本评论即表明您已经阅读并接受
上述条款。