hackquest logo
B

Braised six

shen zhen

40

Article

15862

View

13

Followers

0
0

基于0G Compute构建去中心化AI聊天应用

Braised six
2025-12-04 15:15
0
0
基于0G Compute构建去中心化AI聊天应用

在 AI 时代，聊天应用已成为日常不可或缺的部分，但传统方案往往依赖中心化云服务，如 OpenAI 的 API，这不仅带来高昂成本（每月数千美元起），还涉及数据隐私和审查风险。0G Compute Network 作为一种去中心化 GPU 计算市场，正悄然改变这一格局。它将闲置 GPU 资源与 AI 开发者连接，提供 90% 更低的成本、全球可用性和加密可验证性，让 AI 推理（如运行大型语言模型）真正去中心化。

本文将基于 0G Compute Network ，指导你从零构建一个去中心化 AI 聊天应用。我们使用 Vite + React 作为前端（快速、响应式 UI），Node.js 作为后端（处理 API 调用）。整个应用将通过 0G 的 OpenAI 兼容 SDK 发送聊天请求到去中心化网络，实现低成本、隐私友好的 AI 交互。

前提条件：

  • Node.js

  • 一个 0G 账户（在 0G 平台注册并预存资金，用于支付计算资源）需要至少3个测试币

  • 基本了解 智能合约、React 、Nodejs

第一步：创建后端（Node.js + Express）

后端负责接收前端的聊天消息，调用 0G SDK 执行 AI 推理，并返回响应。我们使用 OpenAI 兼容的 SDK，让集成像调用 GPT 一样简单。

1. 初始化项目

在终端创建后端项目并安装依赖：

mkdir 0g-chat-backend
cd 0g-chat-backend
npm init -y
npm install express cors dotenv @0glabs/0g-serving-broker ethers
npm install -D nodemon typescript ts-node @types/express @types/cors
npx tsc --init

2. 配置环境变量和配置文件

创建 .env 文件：

PRIVATE_KEY='0x'+你的私钥  
RPC_URL='https://evmrpc-testnet.0g.ai'
PORT=3001

tsconfig.json：

3. 创建 src/server.js：

const express = require('express');
const cors = require('cors');
const OpenAI = require('openai');  // 0G 兼容 OpenAI SDKrequire('dotenv').config();

const app = express();
const port = process.env.PORT || 5000;

app.use(cors());
app.use(express.json());

// 配置 0G 客户端（替换为实际 0G 端点和密钥）const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,  // 使用 0G API KeybaseURL: 'https://api.0g.ai/v1',     // 0G 的 OpenAI 兼容端点
});

// 聊天 API 端点
app.post('/chat', async (req, res) => {
  const { message, conversation } = req.body;  // conversation 是之前的消息历史

  try {
    const completion = await openai.chat.completions.create({
      model: 'gpt-3.5-turbo',  // 或其他 0G 支持的模型，如 Llama
      messages: [
        ...conversation,  // 保持上下文
        { role: 'user', content: message }
      ],
      max_tokens: 150,
      temperature: 0.7,
    });

    const aiResponse = completion.choices[0].message.content;
    res.json({ response: aiResponse });
  } catch (error) {
    console.error('0G API Error:', error);
    res.status(500).json({ error: 'AI 推理失败，请检查 0G 账户余额' });
  }
});

app.listen(port, () => {
  console.log(`后端服务器运行在 http://localhost:${port}`);
});

4. 运行后端

node server.js

测试：使用 Postman 发送 POST 到 http://localhost:5000/chat，body 为 { "message": "Hello, AI!" }。如果配置正确，你将看到来自 0G 去中心化 GPU 的响应。注意：首次调用需确保 0G 账户有余额，计算成本约 0.003 美元/请求。

第二步：设置前端（Vite + React）

前端提供实时聊天界面，使用 WebSocket 或简单轮询与后端通信。我们选择 Axios 发送 HTTP 请求。

1. 初始化项目

在另一个终端：

npm create vite@latest decentralized-chat-frontend -- --template react
cd decentralized-chat-frontend
npm install
npm install axios

2. 创建聊天组件

替换 src/App.jsx：

import React, { useState, useEffect, useRef } from 'react';
import { chatAPI } from './api/chat';
import './App.css';

interface Message {
  id: string;
  role: 'user' | 'assistant';
  content: string;
}

function App() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);
  const [providers, setProviders] = useState<any[]>([]);
  const [selectedModel, setSelectedModel] = useState('');
  const messagesEndRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    chatAPI.getProviders().then(data => {
      setProviders(data);
      if (data.length > 0) setSelectedModel(data[0].model);
    });
  }, []);

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  const send = async () => {
    if (!input.trim() || loading || !selectedModel) return;
    const userMsg = { id: Date.now().toString(), role: 'user' as const, content: input };
    setMessages(m => [...m, userMsg]);
    setInput('');
    setLoading(true);

    const aiMsg = { id: (Date.now() + 1).toString(), role: 'assistant' as const, content: '' };
    setMessages(m => [...m, aiMsg]);

    try {
      const res = await chatAPI.sendMessage(
        [...messages, userMsg].map(m => ({ role: m.role, content: m.content })),
        selectedModel
      );
      setMessages(m => m.map(x => x.id === aiMsg.id ? { ...x, content: res.content } : x));
    } catch (e: any) {
      setMessages(m => m.map(x => x.id === aiMsg.id ? { ...x, content: '错误: ' + e.message } : x));
    } finally {
      setLoading(false);
    }
  };

  return (
    // 这三层就是居中的全部秘密
    <div style={{ height: '100vh', display: 'grid', placeItems: 'center', background: 'linear-gradient(135deg,#667eea,#764ba2)' }}>
      <div style={{ width: '95vw', maxWidth: '900px', height: '95vh', background: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(20px)', borderRadius: '24px', boxShadow: '0 20px 50px rgba(0,0,0,0.4)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>

        {/* 下面是你原来的全部内容，直接粘贴进去 */}
        <header className="chat-header">
          <h1>0G AI Chat · 去中心化智能</h1>
          {selectedModel && <div className="chat-model-info">当前模型: {selectedModel}</div>}
        </header>

        {providers.length > 1 && (
          <div className="chat-model-switcher">
            <select value={selectedModel} onChange={e => setSelectedModel(e.target.value)} className="chat-model-select">
              {providers.map(p => <option key={p.providerAddress} value={p.model}>{p.model}</option>)}
            </select>
          </div>
        )}

        <div className="chat-messages">
          <div className="chat-messages-inner">
            {messages.length === 0 ? (
              <div className="chat-welcome">欢迎使用 0G 去中心化 AI 聊天</div>
            ) : (
              messages.map(m => (
                <div key={m.id} className={`chat-message ${m.role}`}>
                  <div className={`chat-bubble ${m.role}`}>{m.content || '...'}</div>
                </div>
              ))
            )}
            <div ref={messagesEndRef} />
          </div>
        </div>

        <div className="chat-input-bar">
          <div className="chat-input-wrapper">
            <input value={input} onChange={e => setInput(e.target.value)} onKeyDown={e => e.key === 'Enter' && !e.shiftKey && send()} placeholder="输入消息..." disabled={loading || !selectedModel} className="chat-input" />
            <button onClick={send} disabled={loading || !input.trim()} className="chat-send-btn">
              {loading ? '思考中...' : '发送'}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

3. 添加样式

在 src/App.css 中添加基本样式：

html,
body,
#root {
  height: 100%;
  margin: 0;
  padding: 0;
}

.page-center {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.chat-app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: "Segoe UI", system-ui, sans-serif;
  color: white;
}

/* 顶部标题栏 */.chat-header {
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
}

.chat-header h1 {
  margin: 0;
  font-size: 1.8em;
  font-weight: 600;
}

.chat-model-info {
  margin-top: 8px;
  opacity: 0.9;
  font-size: 0.95em;
}

/* 模型切换 */.chat-model-switcher {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.05);
}

.chat-model-select {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 1em;
}

/* 消息区域 */.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.chat-messages-inner {
  max-width: 900px;
  margin: 0 auto;
}

.chat-welcome {
  text-align: center;
  margin-top: 100px;
  font-size: 1.3em;
  opacity: 0.8;
}

.chat-welcome h2 {
  font-size: 4em;
  margin-bottom: 20px;
}

.chat-message {
  margin: 16px 0;
  display: flex;
}

.chat-message.user {
  justify-content: flex-end;
}

.chat-message.assistant {
  justify-content: flex-start;
}

.chat-bubble {
  max-width: 80%;
  padding: 14px 20px;
  border-radius: 20px;
  word-wrap: break-word;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.chat-bubble.user {
  background: rgba(255, 255, 255, 0.95);
  color: #333;
}

.chat-bubble.assistant {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 输入区域 */.chat-input-bar {
  padding: 20px 24px;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
}

.chat-input-wrapper {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  gap: 12px;
}

.chat-input {
  flex: 1;
  padding: 16px 20px;
  font-size: 1.1em;
  border-radius: 30px;
  border: none;
  outline: none;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  backdrop-filter: blur(10px);
}

.chat-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.chat-send-btn {
  padding: 0 32px;
  border-radius: 30px;
  border: none;
  background: rgba(255, 255, 255, 0.25);
  color: white;
  font-size: 1.1em;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.2s;
}

.chat-send-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.35);
}

.chat-send-btn:disabled {
  background: #999;
  cursor: not-allowed;
}

.chat-error {
  color: #ff6b6b;
  text-align: center;
  margin-top: 10px;
}

在 src/index.css 中添加基本样式：

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
  width: 100%;
}

body {
  background: #000;
  /* 防止白边 */
}

4. 运行前端

npm run dev

访问 http://localhost:5173，输入消息测试。消息将通过后端路由到 0G 网络，进行去中心化 AI 推理。

结语

通过这个教程，你已构建了一个完整的去中心化 AI 聊天应用，利用 0G Compute 的 GPU 市场实现低成本、全球分布式计算。相比中心化 API，它更具抗审查性和隐私保护。下一步，探索 0G 的训练功能，或添加 Web3 钱包集成支付。

代码仓库：GitHub 模板

欢迎在评论区分享你的构建体验！

Original
Ecosystem:0G
Topic:Other
Tag:
AI
0G
0G Compute
Update at2025-12-04 15:15
0 / 1000