logo

开发者热搜

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

作者：谁偷走了我的奶酪2025.09.18 17:52浏览量：0

简介：零基础实现AI图像生成诗歌，附完整Python源码与部署指南

摘要

本文将通过分步教程，详细讲解如何使用Python Flask框架结合文心一言API，构建一个交互式的《AI看图写诗》网页应用。项目涵盖前端页面设计、后端API调用、图像识别与诗歌生成的全流程，并提供完整的GitHub开源代码，帮助开发者快速掌握AI与Web开发结合的实践技巧。

一、项目背景与技术选型

在AI技术普及的今天，将图像识别与自然语言生成结合的应用场景日益丰富。本项目通过调用文心一言的文本生成能力，结合用户上传的图片，实现”看图写诗”的创意功能。技术栈选择如下：

  • 前端：HTML5 + Bootstrap实现响应式页面
  • 后端：Python Flask框架处理HTTP请求
  • AI能力：文心一言API完成诗歌生成
  • 部署：支持本地运行和云服务器部署

相较于传统方案，本项目的优势在于：

  1. 无需复杂机器学习模型，直接调用成熟API
  2. 轻量级Web框架降低开发门槛
  3. 完整的前后端分离架构便于扩展

二、开发环境准备

2.1 基础环境搭建

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

2.2 文心一言API配置

  1. 登录百度智能云平台
  2. 创建应用获取API Key和Secret Key
  3. 安装官方SDK（可选）：
    1. pip install baidu-aip

三、核心功能实现

3.1 后端服务开发

创建app.py作为主程序文件：

  1. from flask import Flask, request, jsonify, render_template
  2. import requests
  3. import base64
  4. import os
  6. app = Flask(__name__)
  8. # 文心一言API配置（需替换为实际值）
  9. ERNIE_API_URL = "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions"
  10. API_KEY = "your_api_key"
  11. SECRET_KEY = "your_secret_key"
  13. def get_access_token():
  14.     auth_url = f"https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id={API_KEY}&client_secret={SECRET_KEY}"
  15.     response = requests.get(auth_url)
  16.     return response.json().get("access_token")
  18. @app.route('/')
  19. def index():
  20.     return render_template('index.html')
  22. @app.route('/generate_poem', methods=['POST'])
  23. def generate_poem():
  24.     # 获取图片并转base64
  25.     image_file = request.files['image']
  26.     image_base64 = base64.b64encode(image_file.read()).decode('utf-8')
  28.     # 调用文心一言API（简化示例）
  29.     access_token = get_access_token()
  30.     headers = {
  31.         'Content-Type': 'application/json',
  32.     }
  33.     data = {
  34.         "messages": [
  35.             {
  36.                 "role": "user",
  37.                 "content": f"根据这张图片创作一首中文诗歌：{image_base64[:200]}..."  # 实际需分步处理
  38.             }
  39.         ]
  40.     }
  41.     response = requests.post(
  42.         f"{ERNIE_API_URL}?access_token={access_token}",
  43.         headers=headers,
  44.         json=data
  45.     )
  47.     return jsonify({"poem": response.json().get("result", "")})
  49. if __name__ == '__main__':
  50.     app.run(debug=True)

3.2 前端页面设计

创建templates/index.html文件：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>AI看图写诗</title>
  6.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  7. </head>
  8. <body>
  9.     <div class="container mt-5">
  10.         <h1 class="text-center">AI看图写诗</h1>
  11.         <div class="row mt-4">
  12.             <div class="col-md-6">
  13.                 <img id="preview" src="" class="img-fluid rounded" style="display:none;">
  14.                 <input type="file" class="form-control mt-3" id="imageInput" accept="image/*">
  15.                 <button class="btn btn-primary mt-3" onclick="uploadImage()">生成诗歌</button>
  16.             </div>
  17.             <div class="col-md-6">
  18.                 <div class="card">
  19.                     <div class="card-header">生成的诗歌</div>
  20.                     <div class="card-body" id="poemResult">
  21.                         <p class="card-text">等待图片上传...</p>
  22.                     </div>
  23.                 </div>
  24.             </div>
  25.         </div>
  26.     </div>
  28.     <script>
  29.         let imageBase64 = "";
  31.         document.getElementById('imageInput').addEventListener('change', function(e) {
  32.             const file = e.target.files[0];
  33.             if (file) {
  34.                 const reader = new FileReader();
  35.                 reader.onload = function(event) {
  36.                     const img = document.getElementById('preview');
  37.                     img.src = event.target.result;
  38.                     img.style.display = 'block';
  40.                     // 实际开发中应在此处将图片转为base64
  41.                 };
  42.                 reader.readAsDataURL(file);
  43.             }
  44.         });
  46.         function uploadImage() {
  47.             const fileInput = document.getElementById('imageInput');
  48.             if (fileInput.files.length === 0) {
  49.                 alert('请先选择图片');
  50.                 return;
  51.             }
  53.             const formData = new FormData();
  54.             formData.append('image', fileInput.files[0]);
  56.             fetch('/generate_poem', {
  57.                 method: 'POST',
  58.                 body: formData
  59.             })
  60.             .then(response => response.json())
  61.             .then(data => {
  62.                 document.getElementById('poemResult').innerHTML = 
  63.                     `<p class="card-text">${data.poem}</p>`;
  64.             })
  65.             .catch(error => console.error('Error:', error));
  66.         }
  67.     </script>
  68. </body>
  69. </html>

四、关键技术点解析

4.1 图片处理优化

实际应用中需注意：

  1. 图片大小限制：建议前端压缩后再上传
  2. 格式转换：统一转为JPG格式减少体积
  3. 敏感内容过滤：添加NSFW检测机制

4.2 API调用优化

  • 实现请求重试机制
  • 添加缓存层减少重复调用
  • 异步处理多张图片

4.3 诗歌生成策略

  1. 提示词工程：

    1. def build_prompt(image_desc):
    2.  return f"""根据以下图片描述创作一首中文五言绝句：
    3.  {image_desc}
    4.  要求：
    5.  - 押平水韵
    6.  - 包含季节元素
    7.  - 意境悠远"""

  2. 结果后处理：

  • 韵律检测与修正
  • 意象优化
  • 多版本生成

五、项目部署与扩展

5.1 本地运行测试

  1. # 设置环境变量（Linux/Mac）
  2. export FLASK_APP=app.py
  3. export FLASK_ENV=development
  4. flask run
  6. # Windows
  7. set FLASK_APP=app.py
  8. set FLASK_ENV=development
  9. flask run

5.2 云服务器部署

  1. Nginx配置示例：

    1. server {
    2.  listen 80;
    3.  server_name ai-poem.example.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. 使用Gunicorn运行：

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

5.3 功能扩展方向

  • 添加用户系统保存作品
  • 实现诗歌朗诵功能
  • 增加图片风格分类（山水/人物/建筑）
  • 开发移动端APP

六、完整源码获取

项目完整代码已开源至GitHub：

  1. https://github.com/yourusername/ai-image-poem
  2. 包含：
  3. - 前后端完整代码
  4. - 部署文档
  5. - 测试用例
  6. - 常见问题解答

七、常见问题解决方案

  1. API调用失败：

    • 检查密钥有效性
    • 确认网络可访问百度API
    • 查看错误码对照表

  2. 诗歌质量不佳：

    • 优化提示词结构
    • 增加生成参数（温度、长度等）
    • 实现后处理算法

  3. 图片上传问题：

    • 检查文件大小限制
    • 验证MIME类型
    • 添加进度提示

八、技术展望

随着多模态大模型的发展，未来可升级方向包括：

  1. 集成更先进的图像描述生成模型
  2. 实现诗歌与图片的深度语义匹配
  3. 添加用户反馈机制优化生成结果
  4. 支持更多诗歌体裁（词、曲等）

本项目为开发者提供了一个完整的AI+Web应用开发范本，通过实践可深入理解API调用、前后端交互等关键技术点。建议在此基础上进行二次开发，创造更多有价值的AI应用场景。

相关文章推荐

发表评论

最热文章

关于作者

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