frontend

myproject/go/go.mod

+module xlab.zju.edu.cn/git/1158csth/intern_project_frontend_backend
+
+go 1.24.3

myproject/go/handlers/chat.go

+package handlers
+
+import (
+	"fmt"
+	"net/http"
+	"path/filepath"
+	
+	"github.com/gin-gonic/gin"
+	"your-app/models"
+	"your-app/services"
+)
+
+func SendMessage(c *gin.Context) {
+	conversationID := c.Param("conversationId")
+	
+	// 处理多模态输入
+	text := c.PostForm("text")
+	file, err := c.FormFile("image")
+	
+	var imageBase64 string
+	if file != nil {
+		// 保存图片并转换为Base64
+		dst := fmt.Sprintf("./uploads/%s", file.Filename)
+		if err := c.SaveUploadedFile(file, dst); err != nil {
+			c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+			return
+		}
+		imageBase64 = services.ImageToBase64(dst)
+	}
+	
+	// 保存用户消息到数据库
+	userMsg := models.Message{
+		ConversationID: conversationID,
+		Role:           "user",
+		Type:           models.Text,
+		Content:        text,
+	}
+	
+	if imageBase64 != "" {
+		userMsg.Type = models.Image
+		userMsg.Content = imageBase64
+	}
+	
+	// 保存消息（伪代码）
+	db.Create(&userMsg)
+	
+	// 调用LLM服务
+	llmResponse, err := services.CallLLMAPI(conversationID)
+	if err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "LLM服务调用失败"})
+		return
+	}
+	
+	// 保存AI回复
+	aiMsg := models.Message{
+		ConversationID: conversationID,
+		Role:           "assistant",
+		Type:           models.Text,
+		Content:        llmResponse,
+	}
+	db.Create(&aiMsg)
+	
+	c.JSON(http.StatusOK, gin.H{
+		"userMessage": userMsg,
+		"aiMessage":   aiMsg,
+	})
+}
\ No newline at end of file

myproject/go/models/message.go

+package models
+
+import "time"
+
+type MessageType string
+
+const (
+	Text  MessageType = "text"
+	Image MessageType = "image"
+)
+
+type Message struct {
+	ID             uint        `gorm:"primaryKey" json:"id"`
+	ConversationID uint        `json:"conversation_id"`
+	Role           string      `json:"role"` // "user" or "assistant"
+	Type           MessageType `json:"type"`
+	Content        string      `json:"content"` // 文本内容或图片Base64
+	CreatedAt      time.Time   `json:"created_at"`
+}
\ No newline at end of file

myproject/go/services/llm_service.go

+package services
+
+import (
+	"bytes"
+	"encoding/json"
+	"fmt"
+	"io/ioutil"
+	"net/http"
+	"your-app/models"
+)
+
+func CallLLMAPI(conversationID string) (string, error) {
+	// 获取对话上下文
+	var messages []models.Message
+	db.Where("conversation_id = ?", conversationID).Find(&messages)
+	
+	// 构造多模态请求
+	payload := map[string]interface{}{
+		"model": "gpt-4-vision-preview",
+		"messages": buildMessages(messages),
+	}
+	
+	payloadBytes, _ := json.Marshal(payload)
+	req, _ := http.NewRequest("POST", "https://api.openai.com/v1/chat/completions", bytes.NewBuffer(payloadBytes))
+	req.Header.Set("Authorization", "Bearer "+os.Getenv("OPENAI_API_KEY"))
+	req.Header.Set("Content-Type", "application/json")
+	
+	client := &http.Client{}
+	resp, err := client.Do(req)
+	if err != nil {
+		return "", err
+	}
+	defer resp.Body.Close()
+	
+	body, _ := ioutil.ReadAll(resp.Body)
+	
+	// 解析响应
+	var result map[string]interface{}
+	json.Unmarshal(body, &result)
+	
+	choices := result["choices"].([]interface{})
+	message := choices[0].(map[string]interface{})["message"].(map[string]interface{})
+	
+	return message["content"].(string), nil
+}
+
+// 构建多模态消息
+func buildMessages(messages []models.Message) []map[string]interface{} {
+	var result []map[string]interface{}
+	
+	for _, msg := range messages {
+		content := []interface{}{{"type": "text", "text": msg.Content}}
+		
+		if msg.Type == models.Image {
+			content = append(content, map[string]interface{}{
+				"type": "image_url",
+				"image_url": map[string]string{
+					"url": fmt.Sprintf("data:image/jpeg;base64,%s", msg.Content),
+				},
+			})
+		}
+		
+		result = append(result, map[string]interface{}{
+			"role":    msg.Role,
+			"content": content,
+		})
+	}
+	
+	return result
+}
\ No newline at end of file

myproject/my-app/.gitignore

+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

myproject/my-app/README.md

+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

myproject/my-app/next.config.ts

+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

myproject/my-app/package.json

+{
+  "name": "my-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "next": "15.3.3"
+  },
+  "devDependencies": {
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19"
+  }
+}

myproject/my-app/src/app/globals.css

+:root {
+  /* 字体家族 */
+  --font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 
+                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 
+                 sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 
+                 'Segoe UI Symbol', 'Noto Color Emoji';
+  
+  /* 字体大小 */
+  --font-size-base: 13px;
+  --font-size-sm: 12px;
+  
+  /* 字体粗细 */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  
+  /* 行高 */
+  --line-height-title: 1.5;
+  --line-height-body: 1.4;
+  
+  /* 颜色变量 - 基础灰色 */
+  --gray1: hsl(0, 0%, 99%);
+  --gray2: hsl(0, 0%, 97.3%);
+  --gray3: hsl(0, 0%, 95.1%);
+  --gray4: hsl(0, 0%, 93%);
+  --gray5: hsl(0, 0%, 90.9%);
+  --gray6: hsl(0, 0%, 88.7%);
+  --gray7: hsl(0, 0%, 85.8%);
+  --gray8: hsl(0, 0%, 78%);
+  --gray9: hsl(0, 0%, 56.1%);
+  --gray10: hsl(0, 0%, 52.3%);
+  --gray11: hsl(0, 0%, 43.5%);
+  --gray12: hsl(0, 0%, 9%);
+  
+  /* 主题颜色 */
+  --normal-text: var(--gray12);
+  --success-text: hsl(140, 100%, 27%);
+}
+
+/* 全局字体应用 */
+body {
+  margin: 0;
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-body);
+  font-weight: var(--font-weight-normal);
+  color: var(--normal-text);
+}
+
+/* 标题样式 */
+h1, h2, h3, h4, h5, h6,
+.title {
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-title);
+}
+
+/* 辅助样式类 */
+.text-sm {
+  font-size: var(--font-size-sm);
+}
+
+.text-medium {
+  font-weight: var(--font-weight-medium);
+}
+
+.text-success {
+  color: var(--success-text);
+}
+
+/* 响应式字体大小（可选） */
+@media (max-width: 600px) {
+  :root {
+    --font-size-base: 12px;
+    --font-size-sm: 11px;
+  }
+}
\ No newline at end of file

myproject/my-app/src/app/layout.tsx

+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+        {children}
+      </body>
+    </html>
+  );
+}

myproject/my-app/src/app/page.module.css

+:root {
+  /* 字体家族 */
+  --font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 
+                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 
+                 sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 
+                 'Segoe UI Symbol', 'Noto Color Emoji';
+  
+  /* 字体大小 */
+  --font-size-base: 13px;
+  --font-size-sm: 12px;
+  
+  /* 字体粗细 */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  
+  /* 行高 */
+  --line-height-title: 1.5;
+  --line-height-body: 1.4;
+  
+  /* 颜色变量 - 基础灰色 */
+  --gray1: hsl(0, 0%, 99%);
+  --gray2: hsl(0, 0%, 97.3%);
+  --gray3: hsl(0, 0%, 95.1%);
+  --gray4: hsl(0, 0%, 93%);
+  --gray5: hsl(0, 0%, 90.9%);
+  --gray6: hsl(0, 0%, 88.7%);
+  --gray7: hsl(0, 0%, 85.8%);
+  --gray8: hsl(0, 0%, 78%);
+  --gray9: hsl(0, 0%, 56.1%);
+  --gray10: hsl(0, 0%, 52.3%);
+  --gray11: hsl(0, 0%, 43.5%);
+  --gray12: hsl(0, 0%, 9%);
+  
+  /* 主题颜色 */
+  --normal-text: var(--gray12);
+  --success-text: hsl(140, 100%, 27%);
+}
+
+/* 全局字体应用 */
+body {
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-body);
+  font-weight: var(--font-weight-normal);
+  color: var(--normal-text);
+}
+
+/* 标题样式 */
+h1, h2, h3, h4, h5, h6,
+.title {
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-title);
+}
+
+/* 辅助样式类 */
+.text-sm {
+  font-size: var(--font-size-sm);
+}
+
+.text-medium {
+  font-weight: var(--font-weight-medium);
+}
+
+.text-success {
+  color: var(--success-text);
+}
+
+/* 响应式字体大小（可选） */
+@media (max-width: 600px) {
+  :root {
+    --font-size-base: 12px;
+    --font-size-sm: 11px;
+  }
+}
\ No newline at end of file