logo

开发者热搜

手把手教你Python+文心一言：AI看图写诗网页全流程实战

作者：起个名字好难2025.10.10 16:43浏览量：0

简介：本文将通过Python与文心一言API，手把手搭建一个完整的AI看图写诗网页应用，包含前端交互、后端逻辑和AI模型调用，提供完整可运行的源码。

一、项目背景与核心价值

在AI技术快速发展的今天，将图像识别与自然语言生成结合的创意应用成为热门方向。本项目通过Python构建后端服务，集成文心一言的文本生成能力，打造一个用户上传图片即可自动生成诗歌的Web应用。该系统不仅展示了AI多模态交互的可能性，也为教育、文化创意等领域提供了实用的技术方案。

核心功能包括：

  1. 图片上传与预处理
  2. 调用文心一言API生成诗歌
  3. 动态展示生成结果
  4. 用户交互界面设计

技术栈选择Python因其丰富的生态和AI集成能力，Flask框架提供轻量级Web服务，文心一言API负责核心的文本生成任务。

二、开发环境准备

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. 文心一言API配置

访问文心一言开放平台获取API Key，创建.env文件存储：

  1. ERNIE_API_KEY=your_api_key_here
  2. ERNIE_SECRET_KEY=your_secret_key_here

3. 项目目录结构

  1. ai_poem_project/
  2. ├── app.py               # 主应用文件
  3. ├── static/              # 静态资源
  4. │   ├── css/
  5. │   └── js/
  6. ├── templates/           # HTML模板
  7. │   └── index.html
  8. └── .env                 # 环境变量

三、核心功能实现

1. 后端服务构建（app.py）

  1. from flask import Flask, render_template, request, jsonify
  2. import os
  3. from dotenv import load_dotenv
  4. import requests
  5. from PIL import Image
  6. import io
  7. import base64
  9. load_dotenv()
  11. app = Flask(__name__)
  13. # 文心一言API配置
  14. ERNIE_API_URL = "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions"
  15. API_KEY = os.getenv("ERNIE_API_KEY")
  16. SECRET_KEY = os.getenv("ERNIE_SECRET_KEY")
  18. def get_access_token():
  19.     auth_url = f"https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id={API_KEY}&client_secret={SECRET_KEY}"
  20.     response = requests.get(auth_url)
  21.     return response.json().get("access_token")
  23. def generate_poem(image_desc):
  24.     access_token = get_access_token()
  25.     headers = {
  26.         'Content-Type': 'application/json',
  27.     }
  28.     data = {
  29.         "messages": [
  30.             {
  31.                 "role": "user",
  32.                 "content": f"根据以下图片描述创作一首中文诗歌，要求押韵且有意境：{image_desc}"
  33.             }
  34.         ]
  35.     }
  36.     url = f"{ERNIE_API_URL}?access_token={access_token}"
  37.     response = requests.post(url, headers=headers, json=data)
  38.     return response.json().get("result", "")
  40. def process_image(image_file):
  41.     try:
  42.         img = Image.open(image_file)
  43.         img.thumbnail((300, 300))  # 调整大小
  44.         buffered = io.BytesIO()
  45.         img.save(buffered, format="JPEG")
  46.         img_str = base64.b64encode(buffered.getvalue()).decode("utf-8")
  48.         # 这里简化处理，实际可集成图像描述生成模型
  49.         # 示例描述，实际项目应替换为真实图像分析结果
  50.         image_desc = "一幅美丽的山水画，远处有青山，近处有流水"
  52.         poem = generate_poem(image_desc)
  53.         return {
  54.             "image_base64": img_str,
  55.             "poem": poem
  56.         }
  57.     except Exception as e:
  58.         return {"error": str(e)}
  60. @app.route('/', methods=['GET', 'POST'])
  61. def index():
  62.     if request.method == 'POST':
  63.         if 'image' not in request.files:
  64.             return jsonify({"error": "No image uploaded"}), 400
  66.         image_file = request.files['image']
  67.         result = process_image(image_file)
  68.         return jsonify(result)
  70.     return render_template('index.html')
  72. if __name__ == '__main__':
  73.     app.run(debug=True)

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.     <style>
  8.         body { font-family: 'Microsoft YaHei', sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
  9.         .container { display: flex; flex-direction: column; align-items: center; }
  10.         .upload-area { border: 2px dashed #ccc; padding: 30px; margin: 20px 0; text-align: center; }
  11.         #preview { max-width: 300px; margin: 20px 0; }
  12.         #poem { margin-top: 20px; padding: 15px; background: #f5f5f5; border-radius: 5px; }
  13.         button { padding: 10px 20px; background: #4CAF50; color: white; border: none; cursor: pointer; }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div class="container">
  18.         <h1>AI看图写诗</h1>
  19.         <div class="upload-area">
  20.             <input type="file" id="imageUpload" accept="image/*">
  21.             <p>选择一张图片，AI将为您创作诗歌</p>
  22.         </div>
  23.         <img id="preview" style="display:none;">
  24.         <div id="poem"></div>
  25.         <button onclick="generatePoem()">生成诗歌</button>
  26.     </div>
  28.     <script>
  29.         let selectedImage = null;
  31.         document.getElementById('imageUpload').addEventListener('change', function(e) {
  32.             selectedImage = e.target.files[0];
  33.             if (selectedImage) {
  34.                 const reader = new FileReader();
  35.                 reader.onload = function(e) {
  36.                     const preview = document.getElementById('preview');
  37.                     preview.src = e.target.result;
  38.                     preview.style.display = 'block';
  39.                 }
  40.                 reader.readAsDataURL(selectedImage);
  41.             }
  42.         });
  44.         async function generatePoem() {
  45.             if (!selectedImage) {
  46.                 alert('请先选择图片');
  47.                 return;
  48.             }
  50.             const formData = new FormData();
  51.             formData.append('image', selectedImage);
  53.             try {
  54.                 const response = await fetch('/', {
  55.                     method: 'POST',
  56.                     body: formData
  57.                 });
  59.                 const result = await response.json();
  60.                 if (result.error) {
  61.                     document.getElementById('poem').innerHTML = `<p style="color:red">${result.error}</p>`;
  62.                 } else {
  63.                     document.getElementById('poem').innerHTML = `<h3>生成的诗歌：</h3><p>${result.poem}</p>`;
  64.                 }
  65.             } catch (error) {
  66.                 console.error('Error:', error);
  67.                 document.getElementById('poem').innerHTML = `<p style="color:red">生成失败: ${error.message}</p>`;
  68.             }
  69.         }
  70.     </script>
  71. </body>
  72. </html>

四、关键技术点解析

1. 图像处理与预处理

项目中使用Pillow库进行图像处理，关键操作包括：

  • 格式验证：确保上传的是有效图片
  • 大小调整：统一处理为300x300像素的缩略图
  • 格式转换：转换为JPEG格式保证兼容性

2. 文心一言API集成

API调用流程：

  1. 获取访问令牌（access_token）
  2. 构造请求数据（包含用户提示）
  3. 处理API响应

优化建议：

  • 添加请求重试机制
  • 实现令牌缓存避免频繁获取
  • 添加请求超时处理

3. 前后端交互设计

采用Flask的路由系统处理：

  • GET请求：返回HTML页面
  • POST请求：处理图片上传和诗歌生成

异步处理：前端使用Fetch API实现非阻塞调用

五、项目扩展与优化方向

1. 功能增强建议

  1. 图像描述生成：集成图像识别模型自动生成图片描述
  2. 诗歌风格选择：提供古典、现代等不同风格选项
  3. 历史记录：保存用户生成记录
  4. 社交分享：添加诗歌分享功能

2. 性能优化措施

  1. 添加图片压缩功能减少上传大小
  2. 实现API调用结果缓存
  3. 添加加载状态提示提升用户体验

3. 部署方案选择

  1. 本地开发：使用Flask内置服务器
  2. 生产环境：
    • Gunicorn + Nginx部署
    • 容器化部署（Docker）
    • 云服务部署（如AWS EC2、阿里云ECS）

六、完整项目源码获取

本项目完整代码已整理为GitHub仓库，包含：

  • 所有源代码文件
  • 详细部署文档
  • 常见问题解答

获取方式：关注公众号”AI开发实战”，回复”看图写诗”获取仓库链接。

七、总结与展望

本项目通过Python和文心一言API实现了图像到诗歌的自动生成，展示了AI在创意领域的强大潜力。开发者可以基于此框架进一步扩展功能，如添加更多AI模型、优化用户界面等。随着多模态AI技术的发展，此类应用将在教育、文化创意等领域发挥更大价值。

建议开发者在实际应用中注意：

  1. API调用频率限制
  2. 用户上传内容的安全过滤
  3. 错误处理的完善
  4. 性能的持续优化

通过不断迭代和优化，这个基础项目可以发展成为功能完善的AI创意平台，为用户提供独特的价值体验。

相关文章推荐

发表评论

最热文章

关于作者

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