HTML实现超级人工智能，纯前端在线使用，代码开源无需tansorflow.js,效果媲美DeepSeek网页版！

sketu · 2025 年2 月 12 日 02:01

不废话直接上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AI对话</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .title {
            text-align: center;
            font-size: 24px;
            margin-bottom: 20px;
        }
        
        .chat-box {
            border: 1px solid #ccc;
            border-radius: 5px;
            height: 400px;
            padding: 15px;
            overflow-y: auto;
            margin-bottom: 20px;
            background: #f5f5f5;
        }
        
        .message {
            margin: 10px 0;
            padding: 10px;
            border-radius: 10px;
            max-width: 70%;
        }
        
        .user-message {
            background: white;
            margin-left: auto;
            margin-right: 20px;
        }
        
        .error-message {
            background: #ff4444;
            color: white;
            margin-left: 20px;
        }
        
        .input-area {
            display: flex;
            gap: 10px;
        }
        
        input[type="text"] {
            flex: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        
        button {
            padding: 10px 20px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        
        button:hover {
            background: #0056b3;
        }
    </style>
</head>
<body>
    <div class="title">与超级智能AI对话</div>
    
    <div class="chat-box" id="chatBox">
        <!-- 消息将在这里动态添加 -->
    </div>
    
    <div class="input-area">
        <input type="text" id="userInput" placeholder="请输入您的问题...">
        <button onclick="sendMessage()">发送</button>
    </div>

    <script>
        function sendMessage() {
            const input = document.getElementById('userInput');
            const chatBox = document.getElementById('chatBox');
            
            if (input.value.trim() === '') return;

            // 添加用户消息
            const userMessage = document.createElement('div');
            userMessage.className = 'message user-message';
            userMessage.textContent = input.value;
            chatBox.appendChild(userMessage);

            // 添加错误消息
            setTimeout(() => {
                const errorMessage = document.createElement('div');
                errorMessage.className = 'message error-message';
                errorMessage.textContent = '服务器繁忙,请稍后重试';
                chatBox.appendChild(errorMessage);

                // 滚动到底部
                chatBox.scrollTop = chatBox.scrollHeight;
            }, 500);

            // 清空输入框
            input.value = '';
            
            // 滚动到底部
            chatBox.scrollTop = chatBox.scrollHeight;
        }

        // 添加回车键发送功能
        document.getElementById('userInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
</body>
</html>

wangdafa1 · 2025 年2 月 12 日 02:09

可以配置API吗？能配置API就很强了

sketu · 2025 年2 月 12 日 02:09

这就去搓…

wangdafa1 · 2025 年2 月 12 日 02:10

yyt · 2025 年2 月 12 日 02:11

ds:律师函已发,请查收

sketu · 2025 年2 月 12 日 02:11

就是这样的

hundred_flowers · 2025 年2 月 12 日 02:11

建议延迟时间随机一下，造成真的在思考，但是服务器真的繁忙的假象

zzl · 2025 年2 月 12 日 02:12

哈哈哈新赛道上了呀

wwow · 2025 年2 月 12 日 02:24

好厉害感觉

cxu · 2025 年2 月 12 日 02:29

极限精简版
加入了 “正在思考”, 思考时间改为随机

<input id=i><button onclick=s()>发送</button><pre id=c></pre><script>
n=0;s=()=>{c.innerHTML+=`<div>${i.value}</div><p id=p${n}>正在思考</p>`;setTimeout(()=>document.getElementById('p'+n++).innerHTML='服务器繁忙,请稍后重试',300+Math.random()*1e3);i.value='';i.focus()};
i.onkeyup=e=>e.key=='Enter'&&s()
</script>

lcyz7138 · 2025 年2 月 12 日 02:36

加上深度思考，这样就好多了：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AI对话</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .title {
            text-align: center;
            font-size: 24px;
            margin-bottom: 20px;
        }
        
        .chat-box {
            border: 1px solid #ccc;
            border-radius: 5px;
            height: 400px;
            padding: 15px;
            overflow-y: auto;
            margin-bottom: 20px;
            background: #f5f5f5;
        }
        
        .message {
            margin: 10px 0;
            padding: 10px;
            border-radius: 10px;
            max-width: 70%;
        }
        
        .user-message {
            background: white;
            margin-left: auto;
            margin-right: 20px;
        }
        
        .thinking-message {
            background: #e7e7e7;
            color: #333;
            margin-left: 20px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
        }

        .error-message {
            background: #ff4444;
            color: white;
            margin-left: 20px;
        }
        
        .input-area {
            display: flex;
            gap: 10px;
        }
        
        input[type="text"] {
            flex: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        
        button {
            padding: 10px 20px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        
        button:hover {
            background: #0056b3;
        }

        /* 加入旋转动画 */
        .rotate {
            animation: rotate 3s linear infinite;
            margin-right: 10px;
        }

        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="title">与超级智能AI对话</div>
    
    <div class="chat-box" id="chatBox">
        <!-- 消息将在这里动态添加 -->
    </div>
    
    <div class="input-area">
        <input type="text" id="userInput" placeholder="请输入您的问题...">
        <button onclick="sendMessage()">发送</button>
    </div>

    <script>
        function sendMessage() {
            const input = document.getElementById('userInput');
            const chatBox = document.getElementById('chatBox');
            
            if (input.value.trim() === '') return;

            // 添加用户消息
            const userMessage = document.createElement('div');
            userMessage.className = 'message user-message';
            userMessage.textContent = input.value;
            chatBox.appendChild(userMessage);

            // 添加正在进行深度思考的消息框
            const thinkingMessage = document.createElement('div');
            thinkingMessage.className = 'message thinking-message';
            thinkingMessage.innerHTML = '<div class="rotate">⏳</div>正在进行深度思考...';
            chatBox.appendChild(thinkingMessage);

            // 延迟显示错误消息
            setTimeout(() => {
                // 移除深度思考的框
                thinkingMessage.remove();

                // 添加错误消息
                const errorMessage = document.createElement('div');
                errorMessage.className = 'message error-message';
                errorMessage.textContent = '服务器繁忙,请稍后重试';
                chatBox.appendChild(errorMessage);

                // 滚动到底部
                chatBox.scrollTop = chatBox.scrollHeight;
            }, 3000);

            // 清空输入框
            input.value = '';
            
            // 滚动到底部
            chatBox.scrollTop = chatBox.scrollHeight;
        }

        // 添加回车键发送功能
        document.getElementById('userInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
</body>
</html>

doidoi · 2025 年2 月 12 日 02:44

建议用deepseek一样的页面，这个页面太水了，骗不到人

handsome · 2025 年2 月 12 日 02:45

我就知道！

yixiaochuan · 2025 年2 月 12 日 03:03

谁分得清你和梁文锋阿?

mistpeak · 2025 年2 月 12 日 05:43

像这样？

XiaoHuang · 2025 年2 月 12 日 05:44

服务器繁忙，请稍后重试呢？

mistpeak · 2025 年2 月 12 日 05:44

这个还没开始做，纯html搞这个还是有点折磨人的

altmanPowell · 2025 年2 月 12 日 06:03

就这？

unpanda7 · 2025 年2 月 12 日 06:10

万幸自己是前端

doidoi · 2025 年2 月 13 日 01:24

对对对

话题		回复	浏览量
利用java写了个ai，性能媲美 deepseek，可无显卡运行-代码开源搞七捻三病友 , 纯水	53	1401	2025 年2 月 13 日
佬们有什么搓页面快的么搞七捻三软件开发 , 纯水	25	456	2025 年2 月 6 日
DeepSeek官网宽屏 \| 自用油猴脚本 \| 24-11-20更新适配深度思考新UI 开发调优人工智能	4	355	2024 年11 月 14 日
Deepseek梗图大全，总有一款让你发笑☺【长期更新中】搞七捻三人工智能 , 纯水	123	3595	2025 年2 月 13 日
我独自一人用Rust写了一款 ai，对显卡要求极低，代码已开源效果媲美 deepseek 搞七捻三病友 , 人工智能 , 纯水	28	876	2025 年2 月 13 日

HTML实现超级人工智能，纯前端在线使用，代码开源无需tansorflow.js,效果媲美DeepSeek网页版！

相关话题