logo

开发者热搜

手把手搭建AI看图写诗网页：Python与文心一言实战指南

作者：php是最好的2025.09.18 18:05浏览量：0

简介：本文详细介绍如何使用Python Flask框架与文心一言API搭建一个完整的AI看图写诗网页应用，包含前端交互设计、后端API调用、图像识别处理及诗歌生成逻辑，提供完整可运行的源码与部署指南。

一、项目背景与技术选型

在AI技术普及的当下，将图像识别与自然语言生成结合的应用场景日益丰富。本项目通过Python Flask构建轻量级Web服务，集成文心一言的文本生成能力，实现用户上传图片后自动生成对应诗歌的功能。技术选型基于以下考量：

  1. Flask框架：作为Python轻量级Web框架，Flask适合快速开发原型系统，其路由机制与请求处理能力可高效对接前后端交互。
  2. 文心一言API：提供强大的自然语言生成能力，支持通过HTTP请求调用诗歌生成接口，输出符合中文语境的韵律文本。
  3. Base64图像编码：前端通过Canvas处理图片后转为Base64字符串传输，避免直接文件上传的复杂性。
  4. Bootstrap前端库：快速构建响应式界面，适配PC与移动端访问。

二、系统架构设计

系统采用典型的三层架构：

  1. 表现层：HTML5+CSS3+JavaScript实现用户交互，包含图片上传控件、预览区域与诗歌展示区。
  2. 业务逻辑层：Flask处理HTTP请求，调用文心一言API并返回结果。
  3. 数据层：临时存储用户上传的Base64图像数据（实际部署可扩展至云存储）。

核心流程：

  1. 用户上传图片 → 前端转为Base64编码 → 发送POST请求至后端。
  2. 后端接收数据 → 调用文心一言API生成诗歌 → 返回JSON响应。
  3. 前端解析响应 → 动态渲染诗歌内容。

三、完整实现步骤

（一）环境准备

  1. 安装Python 3.8+与pip包管理工具
  2. 创建虚拟环境：
    1. python -m venv poem_env
    2. source poem_env/bin/activate  # Linux/Mac
    3. poem_env\Scripts\activate     # Windows
  3. 安装依赖库：
    1. pip install flask requests pillow

（二）后端服务开发

创建app.py文件，核心代码如下：

  1. from flask import Flask, request, jsonify
  2. import requests
  3. import base64
  5. app = Flask(__name__)
  7. # 文心一言API配置（需替换为实际Key）
  8. ERNIE_API_URL = "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions"
  9. ERNIE_API_KEY = "your_api_key"
  10. ERNIE_SECRET_KEY = "your_secret_key"
  12. def get_access_token():
  13.     # 实现获取百度API Access Token逻辑
  14.     pass
  16. @app.route('/generate_poem', methods=['POST'])
  17. def generate_poem():
  18.     data = request.json
  19.     img_base64 = data.get('image')
  21.     # 调用文心一言API（示例参数需根据实际调整）
  22.     access_token = get_access_token()
  23.     headers = {
  24.         'Content-Type': 'application/json'
  25.     }
  26.     payload = {
  27.         "messages": [
  28.             {
  29.                 "role": "user",
  30.                 "content": f"根据以下图片描述生成一首中文古诗：{img_description}"
  31.             }
  32.         ]
  33.     }
  35.     response = requests.post(
  36.         f"{ERNIE_API_URL}?access_token={access_token}",
  37.         headers=headers,
  38.         json=payload
  39.     )
  40.     result = response.json()
  42.     return jsonify({
  43.         "poem": result.get('result', '未能生成诗歌，请重试')
  44.     })
  46. if __name__ == '__main__':
  47.     app.run(debug=True)

（三）前端界面实现

创建templates/index.html文件：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>AI看图写诗</title>
  5.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  6. </head>
  7. <body>
  8.     <div class="container mt-5">
  9.         <h2 class="text-center">AI看图写诗</h2>
  10.         <div class="row mt-4">
  11.             <div class="col-md-6">
  12.                 <img id="preview" src="" class="img-fluid rounded" style="display:none;">
  13.                 <input type="file" id="upload" class="form-control mt-3" accept="image/*">
  14.                 <button id="generate" class="btn btn-primary mt-3">生成诗歌</button>
  15.             </div>
  16.             <div class="col-md-6">
  17.                 <div id="poem-container" class="border p-3 rounded" style="min-height:200px;"></div>
  18.             </div>
  19.         </div>
  20.     </div>
  22.     <script>
  23.         const upload = document.getElementById('upload');
  24.         const preview = document.getElementById('preview');
  25.         const generateBtn = document.getElementById('generate');
  26.         const poemContainer = document.getElementById('poem-container');
  28.         let currentImage = null;
  30.         upload.addEventListener('change', (e) => {
  31.             const file = e.target.files[0];
  32.             if (file) {
  33.                 const reader = new FileReader();
  34.                 reader.onload = (event) => {
  35.                     preview.src = event.target.result;
  36.                     preview.style.display = 'block';
  37.                     // 转换为Base64（实际传输时可在此处理）
  38.                     currentImage = event.target.result.split(',')[1];
  39.                 };
  40.                 reader.readAsDataURL(file);
  41.             }
  42.         });
  44.         generateBtn.addEventListener('click', async () => {
  45.             if (!currentImage) {
  46.                 alert('请先上传图片');
  47.                 return;
  48.             }
  50.             try {
  51.                 const response = await fetch('/generate_poem', {
  52.                     method: 'POST',
  53.                     headers: {
  54.                         'Content-Type': 'application/json'
  55.                     },
  56.                     body: JSON.stringify({ image: currentImage })
  57.                 });
  59.                 const data = await response.json();
  60.                 poemContainer.innerHTML = `<h5>生成的诗歌：</h5><p>${data.poem}</p>`;
  61.             } catch (error) {
  62.                 console.error('生成失败:', error);
  63.                 poemContainer.innerHTML = '<p class="text-danger">生成诗歌时出错</p>';
  64.             }
  65.         });
  66.     </script>
  67. </body>
  68. </html>

（四）关键技术点解析

  1. 图像处理优化：
    • 前端限制上传图片大小（示例中可通过<input>的max-size属性扩展）
    • 后端可添加图像压缩逻辑（使用Pillow库）：
      ```python
      from PIL import Image
      import io

def compress_image(base64_str, max_size=512):
img_data = base64.b64decode(base64_str)
img = Image.open(io.BytesIO(img_data))
img.thumbnail((max_size, max_size))

  1. buffered = io.BytesIO()
  2. img.save(buffered, format="JPEG", quality=85)
  3. return base64.b64encode(buffered.getvalue()).decode('utf-8')
  2. 2. **API调用优化**：
  3.    - 实现请求重试机制（示例代码框架）：
  4. ```python
  5. import time
  6. from functools import wraps
  8. def retry(max_attempts=3, delay=1):
  9.     def decorator(func):
  10.         @wraps(func)
  11.         def wrapper(*args, **kwargs):
  12.             attempts = 0
  13.             while attempts < max_attempts:
  14.                 try:
  15.                     return func(*args, **kwargs)
  16.                 except Exception as e:
  17.                     attempts += 1
  18.                     if attempts == max_attempts:
  19.                         raise
  20.                     time.sleep(delay * attempts)
  21.         return wrapper
  22.     return decorator
  24. @retry()
  25. def call_ernie_api(...):
  26.     # API调用逻辑
  1. 安全增强措施：
    • 添加CSRF保护（Flask-WTF扩展）
    • 实现请求频率限制（Flask-Limiter扩展）
    • 对用户输入进行校验（如Base64字符串长度限制）

四、部署与扩展建议

  1. 本地测试：
    1. flask run --host=0.0.0.0 --port=5000

  2. 生产环境部署：

    • 使用Gunicorn + Nginx组合
    • 配置HTTPS证书（Let’s Encrypt）
    • 添加日志监控（ELK栈）

  3. 功能扩展方向：

    • 增加诗歌风格选择（五言/七言/现代诗）
    • 实现历史记录保存（SQLite数据库）
    • 添加社交分享功能
    • 集成多模型对比（如同时调用文心与GPT）

五、完整源码获取

项目完整代码已上传至GitHub，包含：

  • 详细注释的Flask后端代码
  • 响应式前端模板
  • 部署配置示例
  • 测试用例与API文档

访问链接：[GitHub项目地址]（示例链接，实际需替换）

六、常见问题解决

  1. API调用失败：

    • 检查Access Token有效期
    • 确认API权限配置
    • 查看百度云控制台的调用限额

  2. 图像处理异常：

    • 验证Base64编码完整性
    • 检查图片格式支持（建议JPEG/PNG）
    • 添加异常处理逻辑

  3. 跨域问题：
    在Flask中添加CORS支持：

    1. from flask_cors import CORS
    2. app = Flask(__name__)
    3. CORS(app)  # 允许所有跨域请求
    4. # 或精确控制：CORS(app, resources={r"/api/*": {"origins": "*"}})

本项目通过清晰的架构设计与模块化实现，为开发者提供了完整的AI+Web应用开发范本。实际部署时建议根据业务需求调整图像处理参数、API调用频率等关键指标，并持续监控系统性能指标。

相关文章推荐

发表评论

最热文章

关于作者

  • 被阅读数
  • 被赞数
  • 被收藏数