切换到窄版

 找回密码
 立即注册
兔窝窝»论坛 › 教程 › 编程开发 › C#实现网页端调用OLLAMA本地模型或API网络模型，进行交 ...
返回列表 发新帖
查看: 31|回复: 1

[C#] C#实现网页端调用OLLAMA本地模型或API网络模型，进行交互聊天

[复制链接]
admin

14

主题

8

回帖

118

积分

管理员

积分
118
发表于 2026-6-25 11:24:27 | 显示全部楼层 |阅读模式




目录结构说明
  1. OllamaWebChat
  2. ├─ Models
  3. │  └─ ChatRequest.cs 【唯一实体文件，无重复类】
  4. ├─ Services
  5. │  └─ OllamaService.cs
  6. ├─ Controllers
  7. │  └─ ChatController.cs
  8. ├─ Views/Chat
  9. │  └─ Index.cshtml 【前端完整修复版，加全量注释】
  10. └─ Program.cs
复制代码
1. Models/ChatRequest.cs
  1. using System.Collections.Generic;

  3. namespace OllamaWebChat.Models
  4. {
  5.     /// <summary>
  6.     /// 统一请求实体，兼容2种模式：本地Ollama / OpenAI标准在线API
  7.     /// 全局仅一份此类，删除项目内所有旧ChatRequest文件避免冲突
  8.     /// </summary>
  9.     public class ChatRequest
  10.     {
  11.         /// <summary>运行模式：local=本地Ollama  online=第三方在线大模型</summary>
  12.         public string RunMode { get; set; } = "local";

  14.         #region 本地Ollama专用参数
  15.         /// <summary>本地Ollama模型名称，如qwen:7b、llama3:8b</summary>
  16.         public string Model { get; set; }
  17.         #endregion

  19.         #region 在线OpenAI兼容接口参数
  20.         /// <summary>API密钥</summary>
  21.         public string ApiKey { get; set; }
  22.         /// <summary>API完整接口地址</summary>
  23.         public string OnlineApiUrl { get; set; }
  24.         /// <summary>在线平台模型名称</summary>
  25.         public string OnlineModelName { get; set; }
  26.         #endregion

  28.         /// <summary>系统角色提示词，定义AI身份</summary>
  29.         public string SystemPrompt { get; set; }
  30.         /// <summary>用户本次输入文本内容</summary>
  31.         public string UserContent { get; set; }
  32.         /// <summary>完整对话上下文历史（多轮记忆）</summary>
  33.         public List<OllamaMessage> History { get; set; } = new();
  34.         /// <summary>本次上传附件列表（图片/代码/文档）</summary>
  35.         public List<ChatAttachment> Attachments { get; set; } = new();
  36.     }

  38.     /// <summary>上传附件实体，存储文件base64、OCR识别文字</summary>
  39.     public class ChatAttachment
  40.     {
  41.         /// <summary>原始文件名</summary>
  42.         public string name { get; set; }
  43.         /// <summary>MIME文件类型 image/png text/cs等</summary>
  44.         public string type { get; set; }
  45.         /// <summary>base64文件数据</summary>
  46.         public string data { get; set; }
  47.         /// <summary>图片OCR识别出的文字内容</summary>
  48.         public string ocrText { get; set; }
  49.     }

  51.     /// <summary>通用消息结构，兼容Ollama/OpenAI message格式</summary>
  52.     public class OllamaMessage
  53.     {
  54.         /// <summary>角色 system/user/assistant</summary>
  55.         public string role { get; set; }
  56.         /// <summary>对话文本内容</summary>
  57.         public string content { get; set; }
  58.     }

  60.     #region Ollama 本地模型流式返回JSON映射
  61.     public class OllamaStreamChunk
  62.     {
  63.         public OllamaMessage message { get; set; }
  64.         public bool done { get; set; }
  65.     }
  66.     #endregion

  68.     #region OpenAI 在线API流式返回JSON映射
  69.     public class OpenAiStreamChunk
  70.     {
  71.         public List<OpenAiChoice> choices { get; set; }
  72.     }
  73.     public class OpenAiChoice
  74.     {
  75.         public OpenAiDelta delta { get; set; }
  76.     }
  77.     public class OpenAiDelta
  78.     {
  79.         public string content { get; set; }
  80.     }
  81.     #endregion

  83.     #region Ollama /api/tags 获取本地模型列表实体
  84.     public class ModelListResp
  85.     {
  86.         public List<ModelItem> models { get; set; }
  87.     }
  88.     public class ModelItem
  89.     {
  90.         public string name { get; set; }
  91.     }
  92.     #endregion
  93. }
复制代码
2. Services/OllamaService.cs（支持取消令牌、双模型分流）
  1. using Microsoft.AspNetCore.Http;
  2. using OllamaWebChat.Models;
  3. using System;
  4. using System.Collections.Generic;
  5. using System.Linq;
  6. using System.Net.Http;
  7. using System.Text;
  8. using System.Text.Json;
  9. using System.Threading;
  10. using System.Threading.Tasks;

  12. namespace OllamaWebChat.Services
  13. {
  14.     public class OllamaService
  15.     {
  16.         private readonly HttpClient _httpClient;
  17.         // 本地Ollama默认接口地址
  18.         private const string OllamaChatApi = "http://localhost:11434/api/chat";

  20.         public OllamaService(HttpClient httpClient)
  21.         {
  22.             _httpClient = httpClient;
  23.             // 超时10分钟，长文本生成预留充足时间
  24.             _httpClient.Timeout = TimeSpan.FromMinutes(10);
  25.         }

  27.         /// <summary>
  28.         /// 统一流式SSE输出接口
  29.         /// 支持本地Ollama / 在线OpenAI接口，支持客户端主动取消请求
  30.         /// </summary>
  31.         /// <param name="response">输出流对象</param>
  32.         /// <param name="req">前端统一请求参数</param>
  33.         /// <param name="ct">取消令牌，用于停止生成</param>
  34.         public async Task StreamChatAsync(HttpResponse response, ChatRequest req, CancellationToken ct)
  35.         {
  36.             // SSE固定响应头，浏览器识别流式输出
  37.             response.ContentType = "text/event-stream";
  38.             response.Headers.CacheControl = "no-cache";
  39.             response.Headers.Connection = "keep-alive";

  41.             // 组装消息队列
  42.             var messages = new List<OllamaMessage>();
  43.             if (!string.IsNullOrWhiteSpace(req.SystemPrompt))
  44.                 messages.Add(new OllamaMessage { role = "system", content = req.SystemPrompt });
  45.             messages.AddRange(req.History);

  47.             // 拼接所有附件解析内容到用户提问
  48.             string userInput = BuildUserInputWithAttachments(req);
  49.             messages.Add(new OllamaMessage { role = "user", content = userInput });

  51.             // 根据运行模式分流处理
  52.             if (req.RunMode == "local")
  53.                 await StreamLocalOllama(response, messages, req.Model, ct);
  54.             else
  55.                 await StreamOnlineOpenAi(response, messages, req, ct);

  57.             // 流式结束标记，前端识别对话完成
  58.             byte[] endBuffer = Encoding.UTF8.GetBytes("data:[END]\n\n");
  59.             await response.Body.WriteAsync(endBuffer, ct);
  60.             await response.Body.FlushAsync(ct);
  61.         }

  63.         /// <summary>拼接用户文本+所有附件解析内容</summary>
  64.         private string BuildUserInputWithAttachments(ChatRequest req)
  65.         {
  66.             string userInput = req.UserContent;
  67.             if (!req.Attachments.Any()) return userInput;

  69.             userInput += "\n\n【用户上传附件内容解析】\n";
  70.             foreach (var file in req.Attachments)
  71.             {
  72.                 userInput += $"\n——————————\n文件名：{file.name}\n";
  73.                 if (file.type.StartsWith("image/"))
  74.                 {
  75.                     // 图片优先拼接OCR识别文字
  76.                     userInput += string.IsNullOrEmpty(file.ocrText)
  77.                         ? "图片文件，请根据画面内容分析\n"
  78.                         : $"图片OCR识别内容：\n{file.ocrText}\n";
  79.                 }
  80.                 else
  81.                 {
  82.                     // 文本/代码文件解码base64，超长截断避免接口报错
  83.                     try
  84.                     {
  85.                         string base64Raw = file.data.Split(",").Last();
  86.                         byte[] fileBytes = Convert.FromBase64String(base64Raw);
  87.                         string fileText = Encoding.UTF8.GetString(fileBytes);
  88.                         if (fileText.Length > 6000)
  89.                             fileText = fileText[..6000] + "\n...(内容过长已截断)";
  90.                         userInput += $"文件完整内容：\n{fileText}\n";
  91.                     }
  92.                     catch
  93.                     {
  94.                         userInput += "二进制文件，无法解析文本\n";
  95.                     }
  96.                 }
  97.             }
  98.             return userInput;
  99.         }

  101.         /// <summary>本地Ollama流式请求处理</summary>
  102.         private async Task StreamLocalOllama(HttpResponse response, List<OllamaMessage> messages, string model, CancellationToken ct)
  103.         {
  104.             var bodyObj = new
  105.             {
  106.                 model = model,
  107.                 messages = messages,
  108.                 stream = true,
  109.                 temperature = 0.7
  110.             };
  111.             string json = JsonSerializer.Serialize(bodyObj);
  112.             var content = new StringContent(json, Encoding.UTF8, "application/json");

  114.             using var msg = new HttpRequestMessage(HttpMethod.Post, OllamaChatApi);
  115.             msg.Content = content;
  116.             using var resp = await _httpClient.SendAsync(msg, HttpCompletionOption.ResponseHeadersRead, ct);
  117.             resp.EnsureSuccessStatusCode();

  119.             using var stream = await resp.Content.ReadAsStreamAsync(ct);
  120.             using var reader = new StreamReader(stream);
  121.             string line;
  122.             while ((line = await reader.ReadLineAsync(ct)) != null)
  123.             {
  124.                 ct.ThrowIfCancellationRequested(); // 客户端点击停止，立刻抛出异常中断
  125.                 if (string.IsNullOrWhiteSpace(line)) continue;

  127.                 var chunk = JsonSerializer.Deserialize<OllamaStreamChunk>(line);
  128.                 if (chunk?.message != null && !string.IsNullOrEmpty(chunk.message.content))
  129.                 {
  130.                     byte[] buffer = Encoding.UTF8.GetBytes($"data:{JsonSerializer.Serialize(chunk.message.content)}\n\n");
  131.                     await response.Body.WriteAsync(buffer, ct);
  132.                     await response.Body.FlushAsync(ct);
  133.                 }
  134.                 if (chunk?.done == true) break;
  135.             }
  136.         }

  138.         /// <summary>在线OpenAI兼容接口流式处理（DeepSeek/智谱/通义千问兼容）</summary>
  139.         private async Task StreamOnlineOpenAi(HttpResponse response, List<OllamaMessage> messages, ChatRequest req, CancellationToken ct)
  140.         {
  141.             _httpClient.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", req.ApiKey);
  142.             var bodyObj = new
  143.             {
  144.                 model = req.OnlineModelName,
  145.                 messages = messages,
  146.                 stream = true,
  147.                 temperature = 0.7
  148.             };
  149.             string json = JsonSerializer.Serialize(bodyObj);
  150.             var content = new StringContent(json, Encoding.UTF8, "application/json");

  152.             using var msg = new HttpRequestMessage(HttpMethod.Post, req.OnlineApiUrl);
  153.             msg.Content = content;
  154.             using var resp = await _httpClient.SendAsync(msg, HttpCompletionOption.ResponseHeadersRead, ct);
  155.             resp.EnsureSuccessStatusCode();

  157.             using var stream = await resp.Content.ReadAsStreamAsync(ct);
  158.             using var reader = new StreamReader(stream);
  159.             string line;
  160.             while ((line = await reader.ReadLineAsync(ct)) != null)
  161.             {
  162.                 ct.ThrowIfCancellationRequested();
  163.                 if (string.IsNullOrWhiteSpace(line) || !line.StartsWith("data:")) continue;

  165.                 string raw = line.Replace("data:", "").Trim();
  166.                 if (raw == "[DONE]") break;
  167.                 var chunk = JsonSerializer.Deserialize<OpenAiStreamChunk>(raw);
  168.                 string text = chunk?.choices?.FirstOrDefault()?.delta?.content;
  169.                 if (!string.IsNullOrEmpty(text))
  170.                 {
  171.                     byte[] buffer = Encoding.UTF8.GetBytes($"data:{JsonSerializer.Serialize(text)}\n\n");
  172.                     await response.Body.WriteAsync(buffer, ct);
  173.                     await response.Body.FlushAsync(ct);
  174.                 }
  175.             }
  176.         }

  178.         /// <summary>获取本地Ollama已下载模型列表，异常返回提示文本</summary>
  179.         public async Task<List<string>> GetLocalModels()
  180.         {
  181.             try
  182.             {
  183.                 var res = await _httpClient.GetFromJsonAsync<ModelListResp>("http://localhost:11434/api/tags");
  184.                 return res?.models?.Select(x => x.name).ToList() ?? new List<string>();
  185.             }
  186.             catch
  187.             {
  188.                 return new List<string> { "Ollama服务未启动" };
  189.             }
  190.         }
  191.     }
  192. }
复制代码
3. Controllers/ChatController.cs
  1. using Microsoft.AspNetCore.Mvc;
  2. using OllamaWebChat.Models;
  3. using OllamaWebChat.Services;
  4. using System.Threading;

  6. namespace OllamaWebChat.Controllers
  7. {
  8.     public class ChatController : Controller
  9.     {
  10.         private readonly OllamaService _ollamaService;
  11.         // 构造注入Ollama服务
  12.         public ChatController(OllamaService ollamaService)
  13.         {
  14.             _ollamaService = ollamaService;
  15.         }

  17.         /// <summary>聊天首页，加载本地模型列表传给前端页面</summary>
  18.         public async Task<IActionResult> Index()
  19.         {
  20.             var localModels = await _ollamaService.GetLocalModels();
  21.             ViewBag.Models = localModels;
  22.             return View();
  23.         }

  25.         /// <summary>SSE流式聊天接口，接收前端请求并输出实时文本</summary>
  26.         /// <param name="request">前端表单参数</param>
  27.         /// <param name="ct">请求取消令牌，前端停止按钮触发中断</param>
  28.         [HttpPost]
  29.         public async Task Stream([FromBody] ChatRequest request, CancellationToken ct)
  30.         {
  31.             Response.Headers["X-Content-Type-Options"] = "nosniff";
  32.             await _ollamaService.StreamChatAsync(Response, request, ct);
  33.         }
  34.     }
  35. }
复制代码
4. Views/Chat/Index.cshtml
  1. @{
  2.     ViewData["Title"] = "AI对话平台｜本地Ollama / 在线API双模式";
  3.     var models = ViewBag.Models as List<string>;
  4. }

  6. <!-- 脚本置顶优先加载，解决marked未定义报错 -->
  7. <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  8. <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
  9. <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
  10. <script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script>

  12. <style>
  13.     * {
  14.         box-sizing: border-box;
  15.         margin: 0;
  16.         padding: 0;
  17.         font-family: "Segoe UI", Microsoft YaHei;
  18.     }
  19.     body {
  20.         background: #f4f7fa;
  21.         padding: 20px;
  22.     }
  23.     .container {
  24.         max-width: 1300px;
  25.         margin: 0 auto;
  26.         background: #fff;
  27.         border-radius: 18px;
  28.         box-shadow: 0 8px 24px rgba(0,0,0,0.07);
  29.         overflow: hidden;
  30.     }
  31.     /* 顶部配置栏 */
  32.     .header-bar {
  33.         display: flex;
  34.         flex-wrap: wrap;
  35.         gap: 12px;
  36.         padding: 18px 24px;
  37.         background: #f8fafc;
  38.         align-items: center;
  39.     }
  40.     .header-bar input,.header-bar select {
  41.         padding: 8px 12px;
  42.         border-radius: 8px;
  43.         border: 1px solid #e2e8f0;
  44.         outline: none;
  45.     }
  46.     #systemPrompt { flex:1; min-width:260px; }
  47.     /* 在线API配置面板，切换模式显示隐藏 */
  48.     .online-config {
  49.         width:100%;
  50.         display:none;
  51.         gap:10px;
  52.         margin-top:10px;
  53.         flex-wrap:wrap;
  54.     }
  55.     /* 聊天消息容器 */
  56.     #chatBox {
  57.         height: 64vh;
  58.         padding: 24px;
  59.         overflow-y: auto;
  60.         background: #ffffff;
  61.     }
  62.     #chatBox::-webkit-scrollbar { width:6px; }
  63.     #chatBox::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }
  64.     /* 消息气泡样式 */
  65.     .msg-wrap { margin:16px 0; display:flex; }
  66.     .user-msg { justify-content:flex-end; }
  67.     .ai-msg { justify-content:flex-start; }
  68.     .msg-card {
  69.         max-width:75%;
  70.         padding:14px 18px;
  71.         border-radius:14px;
  72.         line-height:1.7;
  73.         overflow-wrap:break-word;
  74.     }
  75.     .user-msg .msg-card {
  76.         background: #2563eb;
  77.         color: #fff;
  78.         border-top-right-radius: 4px;
  79.     }
  80.     .ai-msg .msg-card {
  81.         background: #f1f5f9;
  82.         color: #111;
  83.         border-top-left-radius: 4px;
  84.     }
  85.     /* 附件预览区域 */
  86.     .attach-list { display:flex; gap:10px; flex-wrap:wrap; margin:10px 0; }
  87.     .attach-item {
  88.         width:90px;height:90px;border-radius:8px;border:1px solid #eee;
  89.         position:relative;overflow:hidden;background:#fafafa;
  90.     }
  91.     .attach-item img { width:100%;height:70px;object-fit:cover; }
  92.     .attach-name { font-size:11px;padding:2px; }
  93.     .attach-del {
  94.         position:absolute;top:2px;right:2px;
  95.         width:18px;height:18px;background:#ef4444;color:#fff;
  96.         border-radius:50%;text-align:center;cursor:pointer;font-size:12px;
  97.     }
  98.     .ocr-tag {
  99.         position:absolute;bottom:0;left:0;right:0;
  100.         background:#00000066;color:#fff;font-size:10px;text-align:center;
  101.     }
  102.     /* 底部输入区域 */
  103.     .input-area { padding:20px;border-top:1px solid #eee; }
  104.     .file-bar { display:flex;gap:10px;align-items:center;margin-bottom:12px; }
  105.     .upload-btn {
  106.         padding:6px 14px;border:1px dashed #94a3b8;
  107.         border-radius:6px;cursor:pointer;font-size:14px;color:#475569;
  108.     }
  109.     #fileInput { display:none; }
  110.     .text-bar { display:flex;gap:12px;align-items:flex-end; }
  111.     #inputText {
  112.         flex:1;height:95px;padding:12px;border:1px solid #ddd;
  113.         border-radius:10px;resize:none;outline:none;font-size:14px;
  114.     }
  115.     .btn-group { display:flex;flex-direction:column;gap:8px; }
  116.     button {
  117.         border:none;border-radius:8px;padding:9px 16px;
  118.         cursor:pointer;color:#fff;
  119.     }
  120.     #sendBtn { background:#2563eb; }
  121.     #stopBtn { background:#f59e0b;display:none; }
  122.     #clearBtn { background:#94a3b8; }
  123.     .loading { color:#666;font-size:13px;margin:6px 0;display:none; }
  124.     /* Markdown代码块样式 */
  125.     .msg-card pre { border-radius:8px;margin:8px 0; }
  126.     .msg-card p { margin:6px 0; }
  127. </style>

  129. <div class="container">
  130.     <!-- 顶部配置栏 -->
  131.     <div class="header-bar">
  132.         <label>运行模式：</label>
  133.         <select id="runMode">
  134.             <option value="local">本地 Ollama</option>
  135.             <option value="online">在线API(OpenAI兼容)</option>
  136.         </select>

  138.         <label>系统人设：</label>
  139.         <input id="systemPrompt" value="你是全能AI助手，擅长代码解读、文件分析、图片内容理解">

  141.         <label>模型选择：</label>
  142.         <select id="modelSelect">
  143.             @foreach (var m in models)
  144.             {
  145.                 <option value="@m">@m</option>
  146.             }
  147.         </select>

  149.         <!-- 在线API配置面板，切换online模式显示 -->
  150.         <div class="online-config" id="onlinePanel">
  151.             <input id="apiKey" placeholder="API Key" style="width:220px">
  152.             <input id="apiUrl" placeholder="API地址" value="https://api.openai.com/v1/chat/completions" style="width:360px">
  153.             <input id="onlineModel" placeholder="在线模型名(gpt-3.5-turbo)" value="gpt-3.5-turbo">
  154.         </div>
  155.     </div>

  157.     <!-- 聊天消息展示区 -->
  158.     <div id="chatBox"></div>

  160.     <!-- 底部输入+附件区域 -->
  161.     <div class="input-area">
  162.         <div class="file-bar">
  163.             <label class="upload-btn" for="fileInput">📎 上传文件/图片</label>
  164.             <input type="file" id="fileInput" multiple accept="*">
  165.             <div class="attach-list" id="attachList"></div>
  166.         </div>
  167.         <!-- 加载提示文字 -->
  168.         <div class="loading" id="loading">AI思考中...</div>
  169.         <div class="text-bar">
  170.             <textarea id="inputText" placeholder="Enter发送，Shift+Enter换行"></textarea>
  171.             <div class="btn-group">
  172.                 <button id="sendBtn">发送</button>
  173.                 <button id="stopBtn">停止生成</button>
  174.                 <button id="clearBtn">清空对话</button>
  175.             </div>
  176.         </div>
  177.     </div>
  178. </div>

  180. <script>
  181. // ====================== 全局变量定义 ======================
  182. /** 对话历史，持久化到localStorage */
  183. let history = [];
  184. /** 当前待发送附件数组 */
  185. let attachFiles = [];
  186. /** 请求中断控制器，用于停止生成按钮 */
  187. let abortController = null;
  188. /** 第三方库加载完成标记，修复marked未定义报错 */
  189. let libReady = false;

  191. // DOM元素缓存，减少重复查询
  192. const chatBox = document.getElementById("chatBox");
  193. const inputText = document.getElementById("inputText");
  194. const sendBtn = document.getElementById("sendBtn");
  195. const stopBtn = document.getElementById("stopBtn");
  196. const clearBtn = document.getElementById("clearBtn");
  197. const fileInput = document.getElementById("fileInput");
  198. const attachList = document.getElementById("attachList");
  199. const loading = document.getElementById("loading");
  200. const runMode = document.getElementById("runMode");
  201. const modelSelect = document.getElementById("modelSelect");
  202. const onlinePanel = document.getElementById("onlinePanel");

  204. // ====================== 页面初始化绑定事件 ======================
  205. window.onload = ()=>{
  206.     // 读取本地缓存对话记录
  207.     const cache = localStorage.getItem("chatHistory");
  208.     if(cache) history = JSON.parse(cache);
  209.     // 渲染历史对话
  210.     renderHistoryFromCache();
  211.     // 初始化模式面板显示状态
  212.     modeChange();
  213.     // 标记第三方JS加载完成
  214.     libReady = true;
  215. }

  217. // 绑定各类点击/输入事件
  218. runMode.onchange = modeChange;
  219. sendBtn.onclick = sendMsg;
  220. stopBtn.onclick = stopGenerate;
  221. clearBtn.onclick = clearAll;
  222. fileInput.onchange = handleFile;
  223. inputText.onkeydown = inputKeyEvent;

  225. // ====================== 工具函数：模式切换 ======================
  226. /** 切换本地/在线模型，控制面板显隐 */
  227. function modeChange(){
  228.     if(runMode.value === "online"){
  229.         onlinePanel.style.display = "flex";
  230.         modelSelect.style.display = "none";
  231.     }else{
  232.         onlinePanel.style.display = "none";
  233.         modelSelect.style.display = "inline-block";
  234.     }
  235. }

  237. // ====================== 工具函数：停止生成 ======================
  238. /** 中断当前流式请求，终止AI输出 */
  239. function stopGenerate(){
  240.     if(abortController) abortController.abort();
  241.     abortController = null;
  242.     stopBtn.style.display = "none";
  243.     loading.style.display = "none";
  244.     sendBtn.style.display = "flex";
  245. }

  247. // ====================== 工具函数：文件上传、OCR、预览 ======================
  248. /** 文件选择回调，读取base64并对图片执行OCR识别 */
  249. async function handleFile(e){
  250.     const files = Array.from(e.target.files);
  251.     for(let file of files){
  252.         // 读取文件为base64字符串
  253.         const base64 = await readFileBase64(file);
  254.         let ocrText = "";
  255.         // 图片执行中英文OCR识别
  256.         if(file.type.startsWith("image/")){
  257.             loading.innerText = "图片OCR识别中...";
  258.             loading.style.display = "block";
  259.             ocrText = await doOCR(file);
  260.         }
  261.         attachFiles.push({name:file.name,type:file.type,data:base64,ocrText});
  262.     }
  263.     // 刷新附件预览列表
  264.     renderAttach();
  265.     loading.style.display = "none";
  266.     // 清空input，允许重复选择同名文件
  267.     fileInput.value = "";
  268. }

  270. /** FileReader读取文件为Base64 */
  271. function readFileBase64(file){
  272.     return new Promise(res=>{
  273.         const reader = new FileReader();
  274.         reader.readAsDataURL(file);
  275.         reader.onload = e=>res(e.target.result);
  276.     })
  277. }

  279. /** Tesseract图片OCR识别（中英文） */
  280. function doOCR(file){
  281.     return new Promise(async res=>{
  282.         const result = await Tesseract.recognize(file,"chi_sim+eng");
  283.         res(result.data.text);
  284.     })
  285. }

  287. /** 渲染附件预览卡片，支持删除单个附件 */
  288. function renderAttach(){
  289.     attachList.innerHTML = "";
  290.     attachFiles.forEach((item,i)=>{
  291.         const div = document.createElement("div");
  292.         div.className = "attach-item";
  293.         if(item.type.startsWith("image/")){
  294.             div.innerHTML = `
  295.                 <img src="${item.data}">
  296.                 <div class="attach-name">${item.name}</div>
  297.                 ${item.ocrText?'<div class="ocr-tag">已OCR</div>':''}
  298.                 <span class="attach-del" data-i="${i}">×</span>
  299.             `;
  300.         }else{
  301.             div.innerHTML = `
  302.                 <div style="height:70px;display:flex;align-items:center;justify-content:center;font-size:22px;">📄</div>
  303.                 <div class="attach-name">${item.name}</div>
  304.                 <span class="attach-del" data-i="${i}">×</span>
  305.             `;
  306.         }
  307.         attachList.appendChild(div);
  308.     })
  309.     // 绑定删除附件点击事件
  310.     document.querySelectorAll(".attach-del").forEach(el=>{
  311.         el.onclick=()=>{
  312.             const idx = Number(el.dataset.i);
  313.             attachFiles.splice(idx,1);
  314.             renderAttach();
  315.         }
  316.     })
  317. }

  319. // ====================== 工具函数：输入框键盘事件 ======================
  320. /** Enter发送，Shift+Enter换行 */
  321. function inputKeyEvent(e){
  322.     if(e.key === "Enter" && !e.shiftKey) {
  323.         e.preventDefault();
  324.         sendMsg();
  325.     }
  326. }

  328. // ====================== 核心发送消息逻辑 ======================
  329. async function sendMsg(){
  330.     const text = inputText.value.trim();
  331.     // 无文字无附件直接返回
  332.     if(!text && attachFiles.length===0) return;
  333.     // 当前正在生成，禁止重复发送
  334.     if(abortController) return;

  336.     // 渲染用户消息气泡
  337.     let userShow = text;
  338.     if(attachFiles.length>0) userShow += "\n[上传 "+attachFiles.length+" 个附件]";
  339.     appendMsg(userShow,"user");
  340.     inputText.value = "";

  342.     // UI切换状态
  343.     loading.style.display = "block";
  344.     sendBtn.style.display = "none";
  345.     stopBtn.style.display = "flex";

  347.     // 创建AI空气泡用于流式输出
  348.     const aiDom = appendMsg("","ai",true);
  349.     let aiFull = "";
  350.     // 创建中断控制器
  351.     abortController = new AbortController();
  352.     const signal = abortController.signal;

  354.     // 组装请求体，和后端ChatRequest一一对应
  355.     const req = {
  356.         RunMode: runMode.value,
  357.         Model: modelSelect.value,
  358.         ApiKey: document.getElementById("apiKey").value,
  359.         OnlineApiUrl: document.getElementById("apiUrl").value,
  360.         OnlineModelName: document.getElementById("onlineModel").value,
  361.         SystemPrompt: document.getElementById("systemPrompt").value,
  362.         UserContent: text,
  363.         History: history,
  364.         Attachments: attachFiles
  365.     };

  367.     try{
  368.         // 请求后端SSE流式接口
  369.         const res = await fetch("/Chat/Stream",{
  370.             method:"POST",
  371.             headers:{"Content-Type":"application/json"},
  372.             body:JSON.stringify(req),
  373.             signal
  374.         });
  375.         const reader = res.body.getReader();
  376.         const decoder = new TextDecoder();
  377.         let buf = "";

  379.         // 循环读取分片数据
  380.         while(true){
  381.             const {done,value} = await reader.read();
  382.             if(done) break;
  383.             buf += decoder.decode(value,{stream:true});
  384.             const lines = buf.split("\n\n");
  385.             buf = lines.pop();

  387.             for(let line of lines){
  388.                 if(!line.startsWith("data:")) continue;
  389.                 const d = line.replace("data:","").trim();
  390.                 // 对话结束标识
  391.                 if(d === "[END]"){
  392.                     history.push({role:"assistant",content:aiFull});
  393.                     attachFiles = [];
  394.                     renderAttach();
  395.                     break;
  396.                 }
  397.                 const chunk = JSON.parse(d);
  398.                 aiFull += chunk;

  400.                 // ========== 核心修复：判断marked是否加载完成，避免未定义报错 ==========
  401.                 if (typeof marked !== "undefined" && libReady) {
  402.                     aiDom.innerHTML = marked.parse(aiFull);
  403.                     if (typeof Prism !== "undefined") Prism.highlightAll();
  404.                 } else {
  405.                     aiDom.innerText = aiFull;
  406.                 }
  407.                 scrollBottom();
  408.             }
  409.         }
  410.         // 保存用户对话到历史
  411.         history.push({role:"user",content:text});
  412.         // 写入本地存储，刷新页面不丢失对话
  413.         localStorage.setItem("chatHistory",JSON.stringify(history));
  414.     }catch(err){
  415.         // 区分手动停止和异常报错
  416.         if(err.name !== "AbortError") aiDom.innerText = "请求异常："+err.message;
  417.     }finally{
  418.         // 重置状态
  419.         abortController = null;
  420.         loading.style.display = "none";
  421.         sendBtn.style.display = "flex";
  422.         stopBtn.style.display = "none";
  423.     }
  424. }

  426. // ====================== 消息DOM渲染工具 ======================
  427. /**
  428. * 创建聊天气泡
  429. * @param text 消息文本
  430. * @param role user/ai
  431. * @param isTemp 是否临时空气泡（AI流式输出专用）
  432. */
  433. function appendMsg(text,role,isTemp=false){
  434.     const wrap = document.createElement("div");
  435.     wrap.className = `msg-wrap ${role}-msg`;
  436.     const card = document.createElement("div");
  437.     card.className = "msg-card";
  438.     if(!isTemp) card.innerText = text;
  439.     wrap.appendChild(card);
  440.     chatBox.appendChild(wrap);
  441.     scrollBottom();
  442.     return isTemp ? card : null;
  443. }

  445. /** 页面自动滚动到底部 */
  446. function scrollBottom(){
  447.     chatBox.scrollTop = chatBox.scrollHeight;
  448. }

  450. /** 页面加载时读取localStorage历史并渲染 */
  451. function renderHistoryFromCache(){
  452.     history.forEach(item=>{
  453.         appendMsg(item.content, item.role==="user"?"user":"ai");
  454.     })
  455. }

  457. // ====================== 清空全部对话 ======================
  458. function clearAll(){
  459.     chatBox.innerHTML = "";
  460.     history = [];
  461.     attachFiles = [];
  462.     localStorage.removeItem("chatHistory");
  463.     renderAttach();
  464.     stopGenerate();
  465. }
  466. </script>
复制代码
5. Program.cs 注册服务
  1. var builder = WebApplication.CreateBuilder(args);

  3. // 启用MVC控制器视图
  4. builder.Services.AddControllersWithViews();
  5. // 注入Ollama专用HttpClient
  6. builder.Services.AddHttpClient<OllamaWebChat.Services.OllamaService>();

  8. var app = builder.Build();

  10. // 开发环境异常页面
  11. if (!app.Environment.IsDevelopment())
  12. {
  13.     app.UseExceptionHandler("/Home/Error");
  14. }
  15. app.UseStaticFiles();
  16. app.UseRouting();
  17. app.UseAuthorization();

  19. // 默认路由：Chat/Index
  20. app.MapControllerRoute(
  21.     name: "default",
  22.     pattern: "{controller=Chat}/{action=Index}/{id?}");

  24. app.Run();
复制代码
运行前置操作（必做）


  • 清理解决方案 → 重新生成，消除类重复编译报错
  • 本地 Ollama 模式：打开 Ollama 客户端，执行ollama pull qwen:7b下载模型
  • 在线 API 模式：填入对应平台 API Key、接口地址、模型名称即可使用
  • 内网无网络环境：将 marked/prism/tesseract CDN 改为本地 wwwroot 静态文件引用



















本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

举报

admin

14

主题

8

回帖

118

积分

管理员

积分
118
 楼主| 发表于 2026-6-25 12:39:25 | 显示全部楼层
ASP.NET Core 项目启动时允许局域网：
  1. dotnet run --urls=http://0.0.0.0:5000
复制代码
同一局域网其他设备通过 http://本机IP:5000/Chat 访问网页聊天界面
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|兔窝窝

GMT+8, 2026-7-26 16:28 , Processed in 0.102696 second(s), 27 queries .

Powered by www.tu55.cn

Copyright © www.tu55.cn, All Rights Reserved.

快速回复 返回顶部 返回列表