logo

开发者热搜

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

作者：谁偷走了我的奶酪2025.10.10 16:40浏览量：2

简介：本文将详细介绍如何使用Python和文心一言API搭建一个AI看图写诗的网页应用，包含完整代码实现和部署指南。

一、项目背景与核心价值

在AI技术快速发展的今天，图像识别与自然语言处理的结合催生了众多创新应用场景。本文介绍的《AI看图写诗》项目，正是通过文心一言的强大文本生成能力，结合图像特征分析，实现”以图生诗”的创意功能。该项目的核心价值体现在：

  1. 技术融合创新：将计算机视觉与NLP技术有机结合
  2. 零代码门槛：提供完整可运行的代码，适合开发者快速实践
  3. 商业应用潜力：可扩展为文化创意、教育辅导等多个领域

二、技术架构与组件说明

项目采用典型的前后端分离架构，主要组件包括：

  1. 前端界面：HTML5+CSS3+JavaScript构建的响应式网页
  2. 后端服务：Python Flask框架搭建的RESTful API
  3. 核心引擎：文心一言API实现诗歌生成
  4. 辅助工具：Pillow库处理图像，requests库调用API

关键技术选型依据

  • Flask框架：轻量级且易于部署，适合快速开发原型
  • 文心一言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实现（app.py）

  1. from flask import Flask, request, jsonify
  2. import requests
  3. import base64
  4. from io import BytesIO
  5. from PIL import Image
  6. import os
  8. app = Flask(__name__)
  10. # 文心一言API配置（需替换为实际API Key）
  11. ERNIE_API_URL = "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions"
  12. ERNIE_API_KEY = "your_api_key_here"
  13. ERNIE_SECRET_KEY = "your_secret_key_here"
  15. def get_access_token():
  16.     """获取文心一言API访问令牌"""
  17.     # 实现略（需根据百度智能云文档实现）
  18.     pass
  20. def generate_poem(image_base64):
  21.     """调用文心一言API生成诗歌"""
  22.     access_token = get_access_token()
  23.     headers = {
  24.         'Content-Type': 'application/json'
  25.     }
  27.     # 构建请求参数（示例，需根据实际API调整）
  28.     data = {
  29.         "messages": [
  30.             {
  31.                 "role": "user",
  32.                 "content": f"根据以下图片特征生成一首中文古诗：{image_base64[:200]}..."
  33.             }
  34.         ]
  35.     }
  37.     response = requests.post(
  38.         f"{ERNIE_API_URL}?access_token={access_token}",
  39.         headers=headers,
  40.         json=data
  41.     )
  42.     return response.json()
  44. @app.route('/api/generate', methods=['POST'])
  45. def generate():
  46.     """处理图片并生成诗歌"""
  47.     if 'image' not in request.files:
  48.         return jsonify({'error': 'No image provided'}), 400
  50.     image_file = request.files['image']
  51.     try:
  52.         # 图像预处理
  53.         img = Image.open(image_file.stream)
  54.         img = img.resize((300, 300))  # 调整大小
  56.         # 转换为base64（简化处理，实际可优化）
  57.         buffered = BytesIO()
  58.         img.save(buffered, format="JPEG")
  59.         img_str = base64.b64encode(buffered.getvalue()).decode('utf-8')
  61.         # 调用AI生成诗歌
  62.         result = generate_poem(img_str)
  64.         return jsonify({
  65.             'poem': result.get('result', ''),
  66.             'image_info': {
  67.                 'size': img.size,
  68.                 'format': img.format
  69.             }
  70.         })
  71.     except Exception as e:
  72.         return jsonify({'error': str(e)}), 500
  74. if __name__ == '__main__':
  75.     app.run(debug=True)

前端界面实现（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; gap: 20px; }
  10.         .upload-area { border: 2px dashed #ccc; padding: 30px; text-align: center; }
  11.         #preview { max-width: 100%; max-height: 300px; margin: 10px 0; }
  12.         #poem { background: #f5f5f5; padding: 15px; border-radius: 5px; }
  13.         button { padding: 10px 15px; 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.             <img id="preview" style="display:none;">
  22.             <button onclick="generatePoem()">生成诗歌</button>
  23.         </div>
  24.         <div id="poem"></div>
  25.     </div>
  27.     <script>
  28.         let selectedImage = null;
  30.         document.getElementById('imageUpload').addEventListener('change', function(e) {
  31.             selectedImage = e.target.files[0];
  32.             if (selectedImage) {
  33.                 const reader = new FileReader();
  34.                 reader.onload = function(e) {
  35.                     const preview = document.getElementById('preview');
  36.                     preview.src = e.target.result;
  37.                     preview.style.display = 'block';
  38.                 }
  39.                 reader.readAsDataURL(selectedImage);
  40.             }
  41.         });
  43.         async function generatePoem() {
  44.             if (!selectedImage) {
  45.                 alert('请先选择图片');
  46.                 return;
  47.             }
  49.             const formData = new FormData();
  50.             formData.append('image', selectedImage);
  52.             try {
  53.                 const response = await fetch('/api/generate', {
  54.                     method: 'POST',
  55.                     body: formData
  56.                 });
  58.                 const result = await response.json();
  59.                 if (response.ok) {
  60.                     document.getElementById('poem').innerHTML = `
  61.                         <h3>AI生成的诗歌：</h3>
  62.                         <p>${result.poem}</p>
  63.                     `;
  64.                 } else {
  65.                     alert(`错误: ${result.error}`);
  66.                 }
  67.             } catch (error) {
  68.                 console.error('Error:', error);
  69.                 alert('生成诗歌时出错');
  70.             }
  71.         }
  72.     </script>
  73. </body>
  74. </html>

3. 部署与运行指南

本地开发模式

  1. # 启动Flask开发服务器
  2. python app.py

访问 http://localhost:5000 即可使用

生产环境部署建议

  1. 使用WSGI服务器：推荐Gunicorn或uWSGI
    1. pip install gunicorn
    2. gunicorn -w 4 -b 0.0.0.0:8000 app:app

  2. Nginx反向代理配置示例：

    1. server {
    2.     listen 80;
    3.     server_name your-domain.com;
    5.     location / {
    6.         proxy_pass http://127.0.0.1:8000;
    7.         proxy_set_header Host $host;
    8.         proxy_set_header X-Real-IP $remote_addr;
    9.     }
    10. }

四、项目优化与扩展方向

1. 性能优化策略

  1. 图像预处理：添加更复杂的图像分析（色彩、构图等）作为诗歌生成的输入特征
  2. 缓存机制：对相同图片的生成结果进行缓存
  3. 异步处理：使用Celery实现耗时操作的异步处理

2. 功能扩展建议

  1. 多风格诗歌：增加不同诗歌风格的选择（五言、七言、现代诗等）
  2. 用户系统：添加用户注册和作品收藏功能
  3. 社交分享：集成社交媒体分享功能

3. 错误处理增强

  1. 图像格式验证：限制支持的图像格式和大小
  2. API调用重试：实现指数退避的重试机制
  3. 日志记录：添加详细的请求日志

五、完整项目源码获取

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

  1. 所有实现代码
  2. 详细部署文档
  3. 测试用例
  4. 依赖说明文件

访问地址：示例链接（实际需替换）

六、常见问题解决方案

1. API调用失败

  • 检查API Key和Secret Key是否正确
  • 确认账户有足够的调用配额
  • 查看百度智能云控制台的API调用日志

2. 图像处理错误

  • 确保上传的是有效图片文件
  • 限制图片大小不超过5MB
  • 添加文件类型验证

3. 跨域问题

在Flask中添加CORS支持：

  1. from flask_cors import CORS
  2. app = Flask(__name__)
  3. CORS(app)  # 允许所有跨域请求
  4. # 或指定来源
  5. # CORS(app, resources={r"/api/*": {"origins": "http://your-domain.com"}})

七、技术进阶方向

  1. 模型微调：使用文心一言的微调功能训练特定风格的诗歌生成模型
  2. 多模态融合：结合图像语义分割结果提升诗歌质量
  3. 实时处理：使用WebSocket实现实时图像处理和诗歌生成

本项目的实现展示了如何将先进的AI能力快速转化为实际可用的Web应用。通过本文提供的完整代码和详细说明，开发者可以快速掌握相关技术，并在此基础上进行更多创新尝试。实际开发中，建议根据具体需求调整API调用参数和图像处理逻辑，以获得最佳效果。

相关文章推荐

发表评论

最热文章

关于作者

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