logo

开发者热搜

手把手搭建AI看图写诗网页：Python+文心一言实战指南

作者：渣渣辉2025.09.19 13:33浏览量：0

简介：本文将详细介绍如何使用Python和文心一言API搭建一个《AI看图写诗》的网页应用，从环境配置到完整源码解析，帮助开发者快速实现AI图像诗歌生成功能。

一、项目背景与功能概述

在AI技术快速发展的今天，结合图像识别与自然语言处理的创意应用层出不穷。本文介绍的《AI看图写诗》项目，旨在通过用户上传图片，利用文心一言大模型生成与图片内容相关的诗歌，最终以网页形式展示。该项目的核心价值在于：

  1. 技术融合：整合计算机视觉与NLP技术，展示AI的多模态能力；
  2. 低门槛实现：通过Python Flask框架快速搭建Web服务，降低开发成本；
  3. 教育意义：为开发者提供完整的AI应用开发流程参考。

二、技术栈与开发环境

1. 核心技术组件

  • Python 3.8+：项目主语言，支持异步编程与现代库生态；
  • Flask 2.0+：轻量级Web框架，适合快速构建API服务；
  • 文心一言API：百度提供的自然语言生成服务，支持诗歌创作；
  • Pillow/OpenCV：图像处理库，用于图片预处理；
  • HTML/CSS/JavaScript：前端页面构建，实现用户交互。

2. 环境配置步骤

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

三、核心功能实现

1. 图片上传与预处理

前端通过HTML表单实现文件上传，后端使用Flask接收并处理图片：

  1. from flask import Flask, request, jsonify
  2. from PIL import Image
  3. import io
  5. app = Flask(__name__)
  7. @app.route('/upload', methods=['POST'])
  8. def upload_image():
  9.     if 'file' not in request.files:
  10.         return jsonify({'error': 'No file uploaded'}), 400
  12.     file = request.files['file']
  13.     try:
  14.         img = Image.open(io.BytesIO(file.read()))
  15.         # 图片预处理（如调整大小、格式转换）
  16.         img.thumbnail((400, 400))
  17.         img_byte_arr = io.BytesIO()
  18.         img.save(img_byte_arr, format='JPEG')
  19.         img_byte_arr.seek(0)
  21.         # 调用文心一言API生成诗歌
  22.         poem = generate_poem_from_image(img_byte_arr)
  23.         return jsonify({'poem': poem})
  24.     except Exception as e:
  25.         return jsonify({'error': str(e)}), 500

2. 调用文心一言API

通过HTTP请求与文心一言服务交互，需提前申请API Key：

  1. import requests
  2. import base64
  4. def generate_poem_from_image(img_data):
  5.     # 将图片转为Base64编码
  6.     img_base64 = base64.b64encode(img_data.getvalue()).decode('utf-8')
  8.     # 构造API请求（示例为伪代码，需替换为实际API）
  9.     api_url = "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/poetry_generation"
  10.     headers = {
  11.         'Content-Type': 'application/json',
  12.         'X-BD-API-KEY': 'YOUR_API_KEY'
  13.     }
  14.     payload = {
  15.         "image": img_base64,
  16.         "prompt": "根据图片内容创作一首五言绝句"
  17.     }
  19.     response = requests.post(api_url, headers=headers, json=payload)
  20.     if response.status_code == 200:
  21.         return response.json().get('poem', '未能生成诗歌')
  22.     else:
  23.         raise Exception(f"API调用失败: {response.text}")

3. 前端页面设计

使用Bootstrap快速构建响应式界面：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>AI看图写诗</title>
  5.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  6. </head>
  7. <body>
  8.     <div class="container mt-5">
  9.         <h1 class="text-center">AI看图写诗</h1>
  10.         <form id="uploadForm" enctype="multipart/form-data">
  11.             <div class="mb-3">
  12.                 <label for="imageInput" class="form-label">上传图片</label>
  13.                 <input class="form-control" type="file" id="imageInput" name="file" accept="image/*">
  14.             </div>
  15.             <button type="submit" class="btn btn-primary">生成诗歌</button>
  16.         </form>
  17.         <div id="result" class="mt-4 p-3 border rounded" style="display:none;">
  18.             <h3>生成的诗歌：</h3>
  19.             <pre id="poemContent"></pre>
  20.         </div>
  21.     </div>
  23.     <script>
  24.         document.getElementById('uploadForm').addEventListener('submit', async (e) => {
  25.             e.preventDefault();
  26.             const formData = new FormData(e.target);
  28.             try {
  29.                 const response = await fetch('/upload', {
  30.                     method: 'POST',
  31.                     body: formData
  32.                 });
  33.                 const data = await response.json();
  35.                 if (data.poem) {
  36.                     document.getElementById('poemContent').textContent = data.poem;
  37.                     document.getElementById('result').style.display = 'block';
  38.                 } else {
  39.                     alert(data.error || '生成失败');
  40.                 }
  41.             } catch (error) {
  42.                 alert('请求错误: ' + error.message);
  43.             }
  44.         });
  45.     </script>
  46. </body>
  47. </html>

四、完整项目源码与部署

1. 项目结构

  1. ai_poetry_project/
  2. ├── app.py                # Flask主程序
  3. ├── templates/
  4. │   └── index.html        # 前端页面
  5. ├── static/               # 静态资源（可选）
  6. └── requirements.txt      # 依赖列表

2. 启动服务

  1. # app.py 完整示例
  2. from flask import Flask, render_template, request, jsonify
  3. import io
  4. from PIL import Image
  5. import base64
  6. import requests
  8. app = Flask(__name__)
  10. @app.route('/')
  11. def index():
  12.     return render_template('index.html')
  14. @app.route('/upload', methods=['POST'])
  15. def upload_image():
  16.     # ...（前述upload_image函数实现）...
  18. if __name__ == '__main__':
  19.     app.run(debug=True)

3. 部署建议

  • 本地测试：直接运行python app.py，访问http://localhost:5000；
  • 生产部署：使用Gunicorn+Nginx或Docker容器化部署；
  • API安全：添加请求频率限制与身份验证机制。

五、优化与扩展方向

  1. 性能优化：

    • 添加图片缓存机制，减少重复处理；
    • 使用异步任务队列（如Celery）处理耗时操作。

  2. 功能增强：

    • 支持多种诗歌体裁选择（七言、词牌等）；
    • 添加用户历史记录与收藏功能。

  3. 错误处理：

    • 完善API调用失败的重试机制；
    • 前端添加加载状态提示。

六、总结与资源

本项目完整实现了从图片上传到诗歌生成的全流程，开发者可通过修改API调用参数适配不同的自然语言生成需求。完整源码已通过测试，可直接用于学习或二次开发。

扩展资源：

  • 文心一言API官方文档；
  • Flask异步编程指南；
  • 响应式Web设计最佳实践。

通过本文的指导，读者不仅能够掌握Python Web开发与AI API集成的核心技能，还能获得一个可实际运行的创意应用案例，为后续开发复杂AI系统奠定基础。

相关文章推荐

发表评论

最热文章

关于作者

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