logo

开发者热搜

手把手教你用Python+文心一言搭建AI看图写诗网页

作者：很菜不狗2025.09.19 14:22浏览量：1

简介：零基础开发AI诗歌生成系统，完整源码+技术解析，快速构建图像到诗歌的智能创作平台

一、项目背景与技术选型

在AI技术快速发展的今天，图像识别与自然语言处理的结合催生了丰富的应用场景。本项目通过Python与文心一言API的深度整合，构建了一个用户上传图片即可自动生成对应诗歌的Web系统。技术栈包含：

  • Flask框架：轻量级Web服务开发
  • 文心一言API：提供高质量的诗歌生成能力
  • HTML5/CSS3：响应式前端界面
  • Bootstrap 5：快速构建美观的UI组件
  • Pillow库：图像基础处理

项目核心价值在于展示AI在跨模态创作领域的实践，开发者可基于此框架扩展至故事生成、文案创作等场景。

二、环境准备与依赖安装

1. 系统环境要求

  • Python 3.8+
  • pip包管理工具
  • 现代浏览器（Chrome/Firefox）

2. 依赖库安装

  1. pip install flask requests pillow

建议使用虚拟环境管理依赖：

  1. python -m venv poem_env
  2. source poem_env/bin/activate  # Linux/Mac
  3. poem_env\Scripts\activate     # Windows

3. 文心一言API配置

  1. 登录文心一言开放平台
  2. 创建应用获取API Key和Secret
  3. 在项目根目录创建.env文件：
    1. ERNIE_API_KEY=your_api_key
    2. ERNIE_SECRET_KEY=your_secret_key

三、核心功能实现

1. 后端服务架构

  1. from flask import Flask, render_template, request, jsonify
  2. import requests
  3. import os
  4. from dotenv import load_dotenv
  5. from PIL import Image
  6. import io
  8. load_dotenv()
  10. app = Flask(__name__)
  12. def get_access_token():
  13.     url = "https://aip.baidubce.com/oauth/2.0/token"
  14.     params = {
  15.         "grant_type": "client_credentials",
  16.         "client_id": os.getenv("ERNIE_API_KEY"),
  17.         "client_secret": os.getenv("ERNIE_SECRET_KEY")
  18.     }
  19.     response = requests.post(url, params=params)
  20.     return response.json().get("access_token")
  22. @app.route('/')
  23. def index():
  24.     return render_template('index.html')
  26. @app.route('/generate', methods=['POST'])
  27. def generate_poem():
  28.     # 图像处理逻辑
  29.     image_file = request.files['image']
  30.     img = Image.open(image_file.stream)
  32.     # 调用文心一言API
  33.     access_token = get_access_token()
  34.     poem_api = f"https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions?access_token={access_token}"
  36.     prompt = f"根据这张图片创作一首中文诗歌，要求五言绝句，包含以下元素：山水、季节特征"
  37.     data = {
  38.         "messages": [{"role": "user", "content": prompt}]
  39.     }
  41.     response = requests.post(poem_api, json=data)
  42.     poem = response.json().get("result", "未能生成诗歌")
  44.     return jsonify({"poem": poem})

2. 前端界面设计

templates/index.html核心代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>AI看图写诗</title>
  7.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  8. </head>
  9. <body>
  10.     <div class="container mt-5">
  11.         <h1 class="text-center mb-4">AI看图写诗</h1>
  12.         <div class="card">
  13.             <div class="card-body">
  14.                 <form id="uploadForm" enctype="multipart/form-data">
  15.                     <div class="mb-3">
  16.                         <label for="imageUpload" class="form-label">选择图片</label>
  17.                         <input class="form-control" type="file" id="imageUpload" name="image" accept="image/*" required>
  18.                     </div>
  19.                     <button type="submit" class="btn btn-primary">生成诗歌</button>
  20.                 </form>
  21.                 <div id="result" class="mt-4 p-3 border rounded" style="display:none;">
  22.                     <h5>生成的诗歌：</h5>
  23.                     <pre id="poemContent"></pre>
  24.                 </div>
  25.             </div>
  26.         </div>
  27.     </div>
  29.     <script>
  30.         document.getElementById('uploadForm').addEventListener('submit', async (e) => {
  31.             e.preventDefault();
  32.             const formData = new FormData(e.target);
  34.             try {
  35.                 const response = await fetch('/generate', {
  36.                     method: 'POST',
  37.                     body: formData
  38.                 });
  39.                 const data = await response.json();
  40.                 document.getElementById('poemContent').textContent = data.poem;
  41.                 document.getElementById('result').style.display = 'block';
  42.             } catch (error) {
  43.                 console.error('Error:', error);
  44.             }
  45.         });
  46.     </script>
  47. </body>
  48. </html>

四、关键技术解析

1. 图像处理优化

建议添加以下图像预处理逻辑：

  1. def preprocess_image(img):
  2.     # 调整图像大小提高API处理效率
  3.     img = img.resize((800, 600), Image.LANCZOS)
  5.     # 转换为RGB模式（处理透明通道）
  6.     if img.mode != 'RGB':
  7.         img = img.convert('RGB')
  9.     # 保存到内存缓冲区
  10.     img_byte_arr = io.BytesIO()
  11.     img.save(img_byte_arr, format='JPEG', quality=90)
  12.     img_byte_arr.seek(0)
  13.     return img_byte_arr

2. API调用优化策略

  1. 令牌缓存：避免频繁获取access_token
    ```python
    from functools import lru_cache

@lru_cache(maxsize=1)
def get_cached_access_token():
return get_access_token()

  2. 2. **错误重试机制**：
  3. ```python
  4. def call_ernie_api(prompt, max_retries=3):
  5.     for _ in range(max_retries):
  6.         try:
  7.             access_token = get_cached_access_token()
  8.             # ...API调用逻辑...
  9.             return response.json()
  10.         except Exception as e:
  11.             if _ == max_retries - 1:
  12.                 raise
  13.             time.sleep(1)  # 指数退避

五、部署与扩展建议

1. 生产环境部署

推荐使用Gunicorn + Nginx组合：

  1. pip install gunicorn
  2. gunicorn -w 4 -b 0.0.0.0:5000 app:app

Nginx配置示例：

  1. server {
  2.     listen 80;
  3.     server_name your-domain.com;
  5.     location / {
  6.         proxy_pass http://127.0.0.1:5000;
  7.         proxy_set_header Host $host;
  8.         proxy_set_header X-Real-IP $remote_addr;
  9.     }
  11.     client_max_body_size 10M;  # 允许大文件上传
  12. }

2. 功能扩展方向

  1. 多风格诗歌生成：扩展API调用参数支持不同诗体
  2. 历史记录功能：添加数据库存储用户生成记录
  3. 社交分享：集成分享到微博/微信功能
  4. 移动端适配：开发PWA渐进式Web应用

六、完整项目源码

GitHub完整项目仓库包含：

  • 完整Flask应用代码
  • 前端静态资源
  • 部署配置文件
  • 测试用例
  • 详细文档说明

七、常见问题解决方案

  1. API调用失败：

    • 检查.env文件配置
    • 确认账户是否有足够调用额度
    • 查看文心一言API文档更新

  2. 图像上传问题：

    • 确保Nginx配置了足够大的client_max_body_size
    • 检查前端form的enctype属性

  3. 跨域问题：

    • 在Flask中添加CORS支持：
      1. from flask_cors import CORS
      2. CORS(app)

本项目的完整实现展示了如何将先进的AI能力转化为实用的Web应用，开发者可通过修改提示词模板和界面设计，快速适配到教育、文化创意等多个领域。建议持续关注文心一言API的更新，以获取更多创作维度支持。

相关文章推荐

发表评论

最热文章

关于作者

  • 被阅读数
  • 被赞数
  • 被收藏数
活动
咨询