使用FastAPI和google gemini打造一个多语言翻译网站_如何在fastapi框架中构筑多语言-CSDN博客

本文链接：https://blog.csdn.net/weixin_57266891/article/details/146812095

启动

uvicorn main:app --reload

1. 一个基于 FastAPI 的翻译服务 API，主要功能包括提交翻译请求、查询翻译状态和结果

工作流程

用户通过 POST /translate 提交翻译请求
服务保存请求到数据库并启动后台任务
后台任务处理完成后更新数据库
用户可以通过 GET /translate/{id} 查询状态和结果

main.py

from fastapi import FastAPI, BackgroundTasks, HTTPException, Request, Depends
# Depends 的作用，依赖注入：FastAPI 的核心特性之一，允许你声明某个参数（如 db）需要由其他函数（如 get_db）提供。
from fastapi.responses import HTMLResponse
from fastapi.middleware.cors import CORSMiddleware
from fastapi.templating import Jinja2Templates
from sqlalchemy.orm import Session # 表示数据库会话对象，通过这个会话，可以执行数据库操作（如查询、插入、更新等）。

from schemas import TranslationRequestSchema
from typing import List
from utils import translate_text, process_translations

# db related
from database import engine, SessionLocal, get_db
import models 
from models import TranslationRequest, TranslationResult, IndividualTranslations

# 创建数据库中所有定义的表结构
models.Base.metadata.create_all(engine)

app = FastAPI()

# Add CORS middleware
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # Allows all origins
    allow_credentials=True,
    allow_methods=["*"],  # Allows all methods
    allow_headers=["*"],  # Allows all headers
)

# 指定模板文件存放的目录（通常是项目下的 `templates` 文件夹）
templates = Jinja2Templates(directory="templates")

# 返回一个 HTML 页面 (index.html)
@app.get("/index", response_class=HTMLResponse)
def index(request: Request):
    return templates.TemplateResponse(
        "index.html", # 模板文件名（位于 `templates/` 下）
        {"request": request} # 传递给模板的上下文数据
    )
# FastAPI 的 TemplateResponse 要求上下文必须包含 request 对象，用于生成 URL

# 接收 POST 请求
@app.post("/translate")
async def translate(request: TranslationRequestSchema, background_tasks: BackgroundTasks, db: Session = Depends(get_db)):
    print(request.text)
    print(request.languages)

    # 创建并保存翻译请求到数据库
    request_data = models.TranslationRequest(
        text=request.text,
        languages=request.languages)
    
    db.add(request_data)
    db.commit()
    db.refresh(request_data)

    # print(f"Translation request submitted. ID: {request_data.id}")  # 打印 ID 以确认是否正确生成

    # 添加后台任务处理翻译
    background_tasks.add_task(process_translations, request_data.id, request.text, request.languages)
    # print("request_data: ", request_data)
    return {"payload": request_data}

# 根据 request_id 查询翻译请求
@app.get("/translate/{request_id}")
async def get_translation_status(request_id: int, request: Request, db: Session = Depends(get_db)):
    # 根据 request_id 从 TranslationRequest 表中获取一条记录
    request_obj = db.query(TranslationRequest).filter(TranslationRequest.id == request_id).first() # 执行查询并返回第一条结果
    if not request_obj:
        raise HTTPException(status_code=404, detail="Request not found")
    if request_obj.status == "in progress":
        return {"status": request_obj.status}
    translations = db.query(TranslationResult).filter(TranslationResult.request_id == request_id).all()
    return templates.TemplateResponse(
        "results.html", 
        {"request": request, "translations": translations}
    )

2. 验证从前端（如 Web 或移动端）传入的数据是否符合预期格式

schemas.py

# Making sure the data coming from the frontend is valid
from pydantic import BaseModel

class TranslationRequestSchema(BaseModel):
    text: str
    languages: str

    class Config:
        schema_extra = {
            "example": {
                "text": "Hello, world!",
                "languages": "english, german, russian"
            }
        }
        # schema_extra：为 FastAPI 的自动文档（如 Swagger UI）提供示例数据。
        # 效果：在 API 文档中会显示这个示例，帮助开发者理解如何构造请求体。

3. 配置数据库连接

database.py

import os
from dotenv import load_dotenv
from sqlalchemy import create_engine
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import sessionmaker
# sessionmaker：生成数据库会话（Session）的工厂。

load_dotenv()

SQLALCHEMY_DATABASE_URL = os.getenv("DATABASE_URL")
# DATABASE_URL：数据库连接字符串，格式通常为： "数据库类型://用户名:密码@主机:端口/数据库名"


engine = create_engine(SQLALCHEMY_DATABASE_URL, echo=True)
# create_engine：创建核心接口，用于管理数据库连接池。
# echo=True：调试模式下打印所有执行的 SQL 语句（生产环境应设为 False）。

SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
# autocommit=False：禁用自动提交（需显式调用 commit()）。
# autoflush=False：禁用自动刷新（避免意外刷新未完成的操作）。
# bind=engine：绑定到之前创建的引擎。

Base = declarative_base()

# 作用：为每个请求生成独立的数据库会话，并在请求结束后自动关闭。
def get_db():
    db = SessionLocal()
    try:
        yield db # yield db：将会话提供给路由函数使用
    finally:
        db.close()

4. 定义三个SQLAlchemy数据库模型，并创建了对应的数据库表结构。这些模型用于管理一个翻译系统的数据存储。

models.py

# 定义三个数据库模型，并创建了对应的数据库表

from sqlalchemy import Column, Integer, String, DateTime, ForeignKey, JSON, create_engine
from sqlalchemy.ext.declarative import declarative_base
from datetime import datetime
import os
from dotenv import load_dotenv

load_dotenv()

SQLALCHEMY_DATABASE_URL = os.getenv("DATABASE_URL")

Base = declarative_base()

# 记录用户提交的翻译请求，包括原文、目标语言和状态
class TranslationRequest(Base):
    __tablename__ = "translation_requests"
    id = Column(Integer, primary_key=True, index=True)
    text = Column(String, nullable=False)
    languages = Column(String, nullable=False)
    status = Column(String, default="in progress", nullable=False)
    created_at = Column(DateTime, default=datetime.utcnow)
    updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)

# 存储每个请求的翻译结果（按语言拆分）
# 一个TranslationRequest可以对应多个TranslationResult
class TranslationResult(Base):
    __tablename__ = "translation_results"
    id = Column(Integer, primary_key=True, index=True)
    # request_id: 外键，关联到TranslationRequest表的id
    request_id = Column(Integer, ForeignKey("translation_requests.id"), nullable=False)
    language = Column(String, nullable=False)
    translated_text = Column(String, nullable=False)
    created_at = Column(DateTime, default=datetime.utcnow)

class IndividualTranslations(Base):
    __tablename__ = "individual_translations"
    id = Column(Integer, primary_key=True, index=True)
    request_id = Column(Integer, ForeignKey("translation_requests.id"), nullable=False)
    translated_text = Column(String, nullable=False)
    created_at = Column(DateTime, default=datetime.utcnow)

# to ensure tables are created in the database
engine = create_engine(SQLALCHEMY_DATABASE_URL)
Base.metadata.create_all(engine) # 在数据库中生成所有定义的表

5. 使用Google的Gemini AI模型进行文本翻译，并将结果存储到数据库中

utils.py

import google.generativeai as genai
from sqlalchemy.orm import Session
from models import TranslationRequest, TranslationResult, IndividualTranslations
from datetime import datetime
from database import get_db
from typing import List

import os
from dotenv import load_dotenv

load_dotenv()

GEMINI_API_KEY = os.getenv("GOOGLE_API_KEY")
async def translate_text(text: str, language: str) -> str:
    # 设置 API Key
    genai.configure(api_key=GEMINI_API_KEY)
    model = genai.GenerativeModel("gemini-2.0-flash")  # 选择 Gemini-Pro 模型

    # 发送请求并获取响应
    response = model.generate_content(f"Translate the following text to {language}: {text}. Only provide the translated text without any additional explanations or formatting")

    return response.text.strip()
async def process_translations(request_id: int, text: str, languages: List[str]):
    db = next(get_db()) # 获取数据库会话
    try:
        language_list = languages.split(", ")
        for language in language_list:
            translated_text = await translate_text(text, language)
            # 将结果保存到两个表中
            translation_result = TranslationResult(
                request_id=request_id, language=language, translated_text=translated_text
            )
            individual_translation = IndividualTranslations(
                request_id=request_id, translated_text=translated_text
            )
            db.add(translation_result)
            db.add(individual_translation)
            db.commit()

        # 查询数据库，获取与 request_id 对应的翻译请求记录。
        request = db.query(TranslationRequest).filter(TranslationRequest.id == request_id).first()
        request.status = "completed"
        request.updated_at = datetime.utcnow()
        db.add(request)
        db.commit()
    finally:
        db.close()

6. 实现一个多语言翻译服务的用户界面

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Translation Service</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body, html {
          height: 100%;
          margin: 0;
          background-color: white;
          display: flex;
          flex-direction: column;
        }
        .content {
          flex: 1;
        }
        .navbar {
          background-color: #34568B;
        }
        .btn-primary {
          background-color: #88B04B;
          border-color: #88B04B;
        }
        .form-label {
          color: #34568B;
        }
        .logo {
          max-width: 30%;
          height: auto;
          padding: 20px;
        }
        .footer {
          color: black;
          text-align: center;
          padding: 10px 0;
          width: 100%;
        }
        .form-container {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          height: 100%;
          padding: 20px;
        }
        .form-box {
          width: 100%;
          max-width: 600px;
          margin: 10px 0;
        }
        .btn-container {
          text-align: center;
          margin-top: 20px;
        }
      </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
          <a class="navbar-brand mx-auto" href="#">Multilingual Translation Service</a>
          <div class="navbar-text text-light">
            Powered by Google LLM Gemini 2.0
          </div>
        </div>
      </nav>

    <div class="content">
        <div class="container form-container">
          <!-- 翻译文本输入框 -->
          <div class="form-box">
            <label for="text" class="form-label">Text to Translate</label>
            <textarea id="text" class="form-control" rows="10" placeholder="Enter text here..."></textarea>
          </div>

           <!-- 语言选择输入框 -->
          <div class="form-box">
            <label for="languages" class="form-label">Languages</label>
            <input id="languages" class="form-control" type="text" placeholder="e.g., english, german, russian">
            <small class="form-text text-muted">Write the languages you want to translate your text to, separated by commas.</small>
          </div>
           <!-- 提交按钮 -->
          <div class="btn-container">
            <button class="btn btn-primary" onclick="translateText()">Translate</button>
          </div>
        </div>
      </div>

    <script>
        async function translateText() {
          // Extract the text and languages from the form
          var text_for_translation = document.getElementById('text').value;
          var languages_chosen = document.getElementById('languages').value;
    
          // Prepare the payload
          var payload = {
            text: text_for_translation,
            languages: languages_chosen
          };
    
          try {
            // Execute the POST request to the translation endpoint
            const response = await fetch('http://localhost:8000/translate', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify(payload)
            });
    
            // Check if the response is OK
            if (!response.ok) {
              throw new Error(`HTTP error! Status: ${response.status}`);
            }
    
            // Parse and handle the response
            const result = await response.json();
            // alert('The result is: ' + result);
            alert('Translation request submitted. ID: ' + result.payload.id);
            window.location.href = '/translate/' + result.payload.id;
          } catch (error) {
            console.error('Error:', error);
            alert('Failed to submit translation request.');
          }
        }
      </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

7. 展示翻译结果

results.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Translation Results</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- 深蓝色导航栏 -->
  <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #34568B;">
    <div class="container">
      <a class="navbar-brand mx-auto" href="#">Multilingual Translation Results</a>
      <div class="navbar-text text-light">
        Powered by Google LLM Gemini 2.0
      </div>
    </div>
  </nav>

  <div class="container mt-4">
    <h1>Translation Results</h1>
    <div>
      <!-- 循环遍历传入的translations列表 -->
      {% for translation in translations %}
      <!-- 每个翻译结果用卡片(card)展示 -->
        <div class="card mb-3">
          <!-- 卡片头部(card-header)显示目标语言 -->
          <div class="card-header">
            Language: {{ translation.language }}
          </div>
          <!-- 卡片正文(card-body)显示翻译内容 -->
          <div class="card-body">
            <p class="card-text">{{ translation.translated_text }}</p>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

8. 数据库配置

DATABASE_URL = 'postgresql://postgres:password@localhost:5432/translationservice'
# DATABASE_URL：数据库连接字符串，格式通常为： "数据库类型://用户名:密码@主机:端口/数据库名"