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

admin

目录结构说明

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;
   
2. 
   
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";
    
13. 
    
14.         #region 本地Ollama专用参数
    
15.         /// <summary>本地Ollama模型名称，如qwen:7b、llama3:8b</summary>
    
16.         public string Model { get; set; }
    
17.         #endregion
    
18. 
    
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
    
27. 
    
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.     }
    
37. 
    
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.     }
    
50. 
    
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.     }
    
59. 
    
60.     #region Ollama 本地模型流式返回JSON映射
    
61.     public class OllamaStreamChunk
    
62.     {
    
63.         public OllamaMessage message { get; set; }
    
64.         public bool done { get; set; }
    
65.     }
    
66.     #endregion
    
67. 
    
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
    
82. 
    
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;
    
11. 
    
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";
    
19. 
    
20.         public OllamaService(HttpClient httpClient)
    
21.         {
    
22.             _httpClient = httpClient;
    
23.             // 超时10分钟，长文本生成预留充足时间
    
24.             _httpClient.Timeout = TimeSpan.FromMinutes(10);
    
25.         }
    
26. 
    
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";
    
40. 
    
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);
    
46. 
    
47.             // 拼接所有附件解析内容到用户提问
    
48.             string userInput = BuildUserInputWithAttachments(req);
    
49.             messages.Add(new OllamaMessage { role = "user", content = userInput });
    
50. 
    
51.             // 根据运行模式分流处理
    
52.             if (req.RunMode == "local")
    
53.                 await StreamLocalOllama(response, messages, req.Model, ct);
    
54.             else
    
55.                 await StreamOnlineOpenAi(response, messages, req, ct);
    
56. 
    
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.         }
    
62. 
    
63.         /// <summary>拼接用户文本+所有附件解析内容</summary>
    
64.         private string BuildUserInputWithAttachments(ChatRequest req)
    
65.         {
    
66.             string userInput = req.UserContent;
    
67.             if (!req.Attachments.Any()) return userInput;
    
68. 
    
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.         }
    
100. 
     
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");
     
113. 
     
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();
     
118. 
     
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;
     
126. 
     
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.         }
     
137. 
     
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");
     
151. 
     
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();
     
156. 
     
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;
     
164. 
     
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.         }
     
177. 
     
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;
   
5. 
   
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.         }
    
16. 
    
17.         /// <summary>聊天首页，加载本地模型列表传给前端页面</summary>
    
18.         public async Task<IActionResult> Index()
    
19.         {
    
20.             var localModels = await _ollamaService.GetLocalModels();
    
21.             ViewBag.Models = localModels;
    
22.             return View();
    
23.         }
    
24. 
    
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. }
   
5. 
   
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>
    
11. 
    
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>
     
128. 
     
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>
     
137. 
     
138.         <label>系统人设：</label>
     
139.         <input id="systemPrompt" value="你是全能AI助手，擅长代码解读、文件分析、图片内容理解">
     
140. 
     
141.         <label>模型选择：</label>
     
142.         <select id="modelSelect">
     
143.             @foreach (var m in models)
     
144.             {
     
145.                 <option value="@m">@m</option>
     
146.             }
     
147.         </select>
     
148. 
     
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>
     
156. 
     
157.     <!-- 聊天消息展示区 -->
     
158.     <div id="chatBox"></div>
     
159. 
     
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>
     
179. 
     
180. <script>
     
181. // ====================== 全局变量定义 ======================
     
182. /** 对话历史，持久化到localStorage */
     
183. let history = [];
     
184. /** 当前待发送附件数组 */
     
185. let attachFiles = [];
     
186. /** 请求中断控制器，用于停止生成按钮 */
     
187. let abortController = null;
     
188. /** 第三方库加载完成标记，修复marked未定义报错 */
     
189. let libReady = false;
     
190. 
     
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");
     
203. 
     
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. }
     
216. 
     
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;
     
224. 
     
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. }
     
236. 
     
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. }
     
246. 
     
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. }
     
269. 
     
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. }
     
278. 
     
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. }
     
286. 
     
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. }
     
318. 
     
319. // ====================== 工具函数：输入框键盘事件 ======================
     
320. /** Enter发送，Shift+Enter换行 */
     
321. function inputKeyEvent(e){
     
322.     if(e.key === "Enter" && !e.shiftKey) {
     
323.         e.preventDefault();
     
324.         sendMsg();
     
325.     }
     
326. }
     
327. 
     
328. // ====================== 核心发送消息逻辑 ======================
     
329. async function sendMsg(){
     
330.     const text = inputText.value.trim();
     
331.     // 无文字无附件直接返回
     
332.     if(!text && attachFiles.length===0) return;
     
333.     // 当前正在生成，禁止重复发送
     
334.     if(abortController) return;
     
335. 
     
336.     // 渲染用户消息气泡
     
337.     let userShow = text;
     
338.     if(attachFiles.length>0) userShow += "\n[上传 "+attachFiles.length+" 个附件]";
     
339.     appendMsg(userShow,"user");
     
340.     inputText.value = "";
     
341. 
     
342.     // UI切换状态
     
343.     loading.style.display = "block";
     
344.     sendBtn.style.display = "none";
     
345.     stopBtn.style.display = "flex";
     
346. 
     
347.     // 创建AI空气泡用于流式输出
     
348.     const aiDom = appendMsg("","ai",true);
     
349.     let aiFull = "";
     
350.     // 创建中断控制器
     
351.     abortController = new AbortController();
     
352.     const signal = abortController.signal;
     
353. 
     
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.     };
     
366. 
     
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 = "";
     
378. 
     
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();
     
386. 
     
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;
     
399. 
     
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. }
     
425. 
     
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. }
     
444. 
     
445. /** 页面自动滚动到底部 */
     
446. function scrollBottom(){
     
447.     chatBox.scrollTop = chatBox.scrollHeight;
     
448. }
     
449. 
     
450. /** 页面加载时读取localStorage历史并渲染 */
     
451. function renderHistoryFromCache(){
     
452.     history.forEach(item=>{
     
453.         appendMsg(item.content, item.role==="user"?"user":"ai");
     
454.     })
     
455. }
     
456. 
     
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);
   
2. 
   
3. // 启用MVC控制器视图
   
4. builder.Services.AddControllersWithViews();
   
5. // 注入Ollama专用HttpClient
   
6. builder.Services.AddHttpClient<OllamaWebChat.Services.OllamaService>();
   
7. 
   
8. var app = builder.Build();
   
9. 
   
10. // 开发环境异常页面
    
11. if (!app.Environment.IsDevelopment())
    
12. {
    
13.     app.UseExceptionHandler("/Home/Error");
    
14. }
    
15. app.UseStaticFiles();
    
16. app.UseRouting();
    
17. app.UseAuthorization();
    
18. 
    
19. // 默认路由：Chat/Index
    
20. app.MapControllerRoute(
    
21.     name: "default",
    
22.     pattern: "{controller=Chat}/{action=Index}/{id?}");
    
23. 
    
24. app.Run();

复制代码

运行前置操作（必做）

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

admin

ASP.NET Core 项目启动时允许局域网：

1. dotnet run --urls=http://0.0.0.0:5000

复制代码

同一局域网其他设备通过 http://本机IP:5000/Chat 访问网页聊天界面