logo

开发者热搜

手把手”搭建AI诗画网页：Python+文心一言全流程指南

作者：宇宙中心我曹县2025.10.10 16:40浏览量：2

简介：本文将详细介绍如何使用Python和文心一言API搭建一个完整的《AI看图写诗》网页项目，包含前端界面设计、后端逻辑实现和完整源码解析。

一、项目背景与技术选型

随着AI技术的快速发展，图像识别与自然语言生成的结合催生了”看图写诗”这类创新应用。本项目旨在通过Python构建一个Web应用，用户上传图片后，系统调用文心一言API生成对应诗歌，实现”诗画共生”的创作体验。

技术选型方面，我们采用：

  • Flask框架：轻量级Web框架，适合快速开发
  • HTML5+CSS3：构建响应式前端界面
  • Bootstrap 5：加速UI组件开发
  • 文心一言API：提供高质量的诗歌生成能力
  • Pillow库：处理图片上传与预处理

选择这些技术的原因是：Flask的学习曲线平缓，开发效率高；Bootstrap能快速实现美观的界面；文心一言API在中文诗歌生成领域表现优异，能生成符合韵律的古典诗词。

二、环境准备与API配置

1. 开发环境搭建

  1. # 创建虚拟环境
  2. python -m venv venv
  3. source venv/bin/activate  # Linux/Mac
  4. venv\Scripts\activate     # Windows
  6. # 安装依赖
  7. pip install flask pillow requests

2. 文心一言API配置

首先需要在百度智能云平台申请文心一言API权限，获取：

  • API Key
  • Secret Key
  • Access Token（需通过API Key和Secret Key获取）

建议将敏感信息存储在环境变量中：

  1. import os
  2. os.environ['ERNIE_API_KEY'] = 'your_api_key'
  3. os.environ['ERNIE_SECRET_KEY'] = 'your_secret_key'

三、核心功能实现

1. 图片处理模块

使用Pillow库实现图片预处理：

  1. from PIL import Image
  2. import io
  4. def process_image(image_file):
  5.     try:
  6.         img = Image.open(image_file)
  7.         # 调整图片大小（可选）
  8.         img.thumbnail((800, 800))
  9.         # 转换为RGB模式（确保兼容性）
  10.         if img.mode != 'RGB':
  11.             img = img.convert('RGB')
  12.         return img
  13.     except Exception as e:
  14.         print(f"图片处理错误: {e}")
  15.         return None

2. API调用封装

创建专门的API客户端类：

  1. import requests
  2. import base64
  3. import json
  4. import os
  5. from datetime import datetime, timedelta
  7. class ErnieBotClient:
  8.     def __init__(self):
  9.         self.api_key = os.getenv('ERNIE_API_KEY')
  10.         self.secret_key = os.getenv('ERNIE_SECRET_KEY')
  11.         self.access_token = self._get_access_token()
  13.     def _get_access_token(self):
  14.         url = "https://aip.baidubce.com/oauth/2.0/token"
  15.         params = {
  16.             "grant_type": "client_credentials",
  17.             "client_id": self.api_key,
  18.             "client_secret": self.secret_key
  19.         }
  20.         response = requests.post(url, params=params)
  21.         return response.json().get("access_token")
  23.     def generate_poem(self, image_base64, prompt="根据这张图片创作一首古诗"):
  24.         url = "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions"
  25.         headers = {
  26.             'Content-Type': 'application/json'
  27.         }
  28.         data = {
  29.             "messages": [
  30.                 {
  31.                     "role": "user",
  32.                     "content": f"{prompt}\n图片描述:{self._describe_image(image_base64)}"
  33.                 }
  34.             ]
  35.         }
  36.         params = {
  37.             "access_token": self.access_token
  38.         }
  39.         response = requests.post(url, headers=headers, params=params, data=json.dumps(data))
  40.         return response.json().get("result", "")
  42.     def _describe_image(self, image_base64):
  43.         # 这里可以添加图片描述的逻辑
  44.         return "一幅美丽的风景画"

3. Flask路由设计

  1. from flask import Flask, render_template, request, jsonify
  2. import base64
  3. from io import BytesIO
  5. app = Flask(__name__)
  6. ernie_client = ErnieBotClient()
  8. @app.route('/')
  9. def index():
  10.     return render_template('index.html')
  12. @app.route('/generate', methods=['POST'])
  13. def generate_poem():
  14.     if 'image' not in request.files:
  15.         return jsonify({"error": "未上传图片"}), 400
  17.     image_file = request.files['image']
  18.     img = process_image(image_file)
  19.     if not img:
  20.         return jsonify({"error": "图片处理失败"}), 400
  22.     buffered = BytesIO()
  23.     img.save(buffered, format="JPEG")
  24.     img_str = base64.b64encode(buffered.getvalue()).decode('utf-8')
  26.     poem = ernie_client.generate_poem(img_str)
  27.     return jsonify({"poem": poem})
  29. if __name__ == '__main__':
  30.     app.run(debug=True)

四、前端界面开发

创建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.     <style>
  9.         .result-box {
  10.             min-height: 200px;
  11.             border: 1px solid #ddd;
  12.             padding: 15px;
  13.             margin-top: 20px;
  14.             background-color: #f8f9fa;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div class="container mt-5">
  20.         <h1 class="text-center mb-4">AI看图写诗</h1>
  21.         <div class="row justify-content-center">
  22.             <div class="col-md-6">
  23.                 <div class="card">
  24.                     <div class="card-body">
  25.                         <form id="poemForm" enctype="multipart/form-data">
  26.                             <div class="mb-3">
  27.                                 <label for="imageInput" class="form-label">选择图片</label>
  28.                                 <input class="form-control" type="file" id="imageInput" accept="image/*" required>
  29.                             </div>
  30.                             <button type="submit" class="btn btn-primary w-100">生成诗歌</button>
  31.                         </form>
  32.                         <div class="result-box mt-4" id="resultBox">
  33.                             <p class="text-muted">诗歌将显示在这里...</p>
  34.                         </div>
  35.                     </div>
  36.                 </div>
  37.             </div>
  38.         </div>
  39.     </div>
  41.     <script>
  42.         document.getElementById('poemForm').addEventListener('submit', async (e) => {
  43.             e.preventDefault();
  44.             const formData = new FormData();
  45.             const fileInput = document.getElementById('imageInput');
  46.             formData.append('image', fileInput.files[0]);
  48.             try {
  49.                 const response = await fetch('/generate', {
  50.                     method: 'POST',
  51.                     body: formData
  52.                 });
  53.                 const data = await response.json();
  55.                 if (data.error) {
  56.                     document.getElementById('resultBox').innerHTML = 
  57.                         `<div class="alert alert-danger">${data.error}</div>`;
  58.                 } else {
  59.                     document.getElementById('resultBox').innerHTML = 
  60.                         `<h5>生成的诗歌：</h5><pre>${data.poem}</pre>`;
  61.                 }
  62.             } catch (error) {
  63.                 console.error('Error:', error);
  64.                 document.getElementById('resultBox').innerHTML = 
  65.                     `<div class="alert alert-danger">发生错误: ${error.message}</div>`;
  66.             }
  67.         });
  68.     </script>
  69. </body>
  70. </html>

五、完整项目源码与部署指南

完整项目结构

  1. ai-poem-project/
  2. ├── app.py                # 主应用文件
  3. ├── templates/
  4. │   └── index.html        # 前端模板
  5. ├── static/               # 静态资源（可选）
  6. ├── requirements.txt      # 依赖文件
  7. └── README.md             # 项目说明

requirements.txt内容

  1. Flask==2.3.2
  2. Pillow==10.0.0
  3. requests==2.31.0

部署建议

  1. 本地测试：直接运行python app.py
  2. 生产部署：
    • 使用Gunicorn：gunicorn -w 4 -b 0.0.0.0:5000 app:app
    • 配合Nginx反向代理
  3. 云服务部署：
    • 推荐使用百度智能云BCE或阿里云ECS
    • 配置自动伸缩应对流量变化

六、优化与扩展方向

  1. 性能优化：

    • 添加图片缓存机制
    • 实现异步任务队列（Celery）
    • 添加API调用限流

  2. 功能扩展：

    • 支持多种诗歌体裁选择（五言、七言、词牌）
    • 添加诗歌历史记录功能
    • 实现社交分享功能

  3. 用户体验改进：

    • 添加加载动画
    • 实现图片预览功能
    • 添加多语言支持

七、常见问题解决方案

  1. API调用失败：

    • 检查Access Token是否过期
    • 确认API权限是否正确配置
    • 查看网络连接是否正常

  2. 图片处理错误：

    • 确保上传的是有效图片文件
    • 检查图片大小是否超过限制
    • 验证图片格式是否支持

  3. 诗歌质量不理想：

    • 调整prompt提示词
    • 尝试不同的图片描述方式
    • 联系API提供商调整模型参数

本项目的完整源码已附上，开发者可以根据实际需求进行修改和扩展。通过这个项目，不仅可以学习Python Web开发的基本流程，还能深入理解如何将AI能力集成到实际应用中。随着AI技术的不断进步，这类创意应用将有更广阔的发展空间。

相关文章推荐

发表评论

最热文章

关于作者

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