logo

开发者热搜

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

作者：KAKAKA2025.09.18 18:04浏览量：4

简介：本文提供从零开始搭建AI看图写诗网页项目的完整方案，包含Python后端开发、文心一言API调用、前端页面设计及完整源码解析，帮助开发者快速实现图片上传与诗歌生成的交互功能。

一、项目背景与功能概述

随着AI技术的普及，图像与文本的跨模态交互成为热门应用场景。本文介绍的《AI看图写诗》项目，通过用户上传图片并调用文心一言大模型，生成与图像意境匹配的诗歌，实现”以图生诗”的趣味功能。项目采用Python Flask框架构建后端服务，前端使用HTML/CSS/JavaScript实现交互界面，通过文心一言API完成核心AI计算。

核心功能模块：

  1. 图片上传与预处理
  2. 图像特征提取与API请求封装
  3. 诗歌生成结果展示
  4. 用户交互历史记录

二、技术栈与开发环境

1. 基础环境配置

  • Python 3.8+（推荐使用Anaconda管理）
  • Flask 2.0+（轻量级Web框架）
  • Pillow 9.0+（图像处理库）
  • Requests 2.28+（HTTP请求库）
  • 文心一言API密钥（需通过官方渠道申请）

环境准备命令：

  1. pip install flask pillow requests

2. 文心一言API接入

通过百度智能云平台获取API密钥，需完成以下步骤：

  1. 注册开发者账号
  2. 创建应用获取API Key和Secret Key
  3. 生成访问令牌（Access Token）

令牌生成示例：

  1. import requests
  2. import base64
  3. import hashlib
  4. import json
  6. def get_access_token(api_key, secret_key):
  7.     auth_url = f"https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id={api_key}&client_secret={secret_key}"
  8.     response = requests.get(auth_url)
  9.     return response.json().get("access_token")

三、核心代码实现

1. Flask后端服务

主程序结构：

  1. app/
  2. ├── static/        # 静态资源
  3. │   ├── css/
  4. │   └── js/
  5. ├── templates/     # HTML模板
  6. └── app.py         # 主程序入口

Flask路由示例：

  1. from flask import Flask, render_template, request, jsonify
  2. import base64
  3. import requests
  4. import os
  6. app = Flask(__name__)
  8. # 文心一言API配置
  9. API_KEY = "your_api_key"
  10. SECRET_KEY = "your_secret_key"
  11. ACCESS_TOKEN = get_access_token(API_KEY, SECRET_KEY)
  13. @app.route('/')
  14. def index():
  15.     return render_template('index.html')
  17. @app.route('/generate_poem', methods=['POST'])
  18. def generate_poem():
  19.     # 获取上传的图片
  20.     file = request.files['image']
  21.     img_bytes = file.read()
  23.     # 调用文心一言API
  24.     poem = call_ernie_api(img_bytes)
  26.     return jsonify({"poem": poem})
  28. def call_ernie_api(img_data):
  29.     # 图像转base64
  30.     img_base64 = base64.b64encode(img_data).decode('utf-8')
  32.     # API请求参数
  33.     url = "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/ernie_poem/run"
  34.     headers = {
  35.         'Content-Type': 'application/json',
  36.         'Accept': 'application/json'
  37.     }
  38.     params = {
  39.         "image": img_base64,
  40.         "access_token": ACCESS_TOKEN
  41.     }
  43.     response = requests.post(url, headers=headers, json=params)
  44.     return response.json().get("result", "未能生成诗歌")
  46. if __name__ == '__main__':
  47.     app.run(debug=True)

2. 前端交互设计

HTML核心结构：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>AI看图写诗</title>
  5.     <link rel="stylesheet" href="/static/css/style.css">
  6. </head>
  7. <body>
  8.     <div class="container">
  9.         <h1>AI看图写诗</h1>
  10.         <form id="uploadForm">
  11.             <input type="file" id="imageInput" accept="image/*">
  12.             <button type="submit">生成诗歌</button>
  13.         </form>
  14.         <div id="result"></div>
  15.     </div>
  16.     <script src="/static/js/main.js"></script>
  17. </body>
  18. </html>

JavaScript交互逻辑：

  1. document.getElementById('uploadForm').addEventListener('submit', async (e) => {
  2.     e.preventDefault();
  3.     const fileInput = document.getElementById('imageInput');
  4.     const formData = new FormData();
  5.     formData.append('image', fileInput.files[0]);
  7.     try {
  8.         const response = await fetch('/generate_poem', {
  9.             method: 'POST',
  10.             body: formData
  11.         });
  12.         const data = await response.json();
  13.         document.getElementById('result').innerHTML = `
  14.             <h3>生成的诗歌：</h3>
  15.             <p>${data.poem}</p>
  16.         `;
  17.     } catch (error) {
  18.         console.error('Error:', error);
  19.     }
  20. });

四、项目部署与优化

1. 本地测试流程

  1. 启动Flask服务：python app.py
  2. 访问http://localhost:5000
  3. 上传测试图片（建议使用风景类图片效果更佳）

2. 生产环境部署建议

  • 容器化部署：使用Docker打包应用
    1. FROM python:3.9-slim
    2. WORKDIR /app
    3. COPY . .
    4. RUN pip install -r requirements.txt
    5. CMD ["gunicorn", "--bind", "0.0.0.0:8000", "app:app"]

  • Nginx反向代理配置示例：

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

3. 性能优化方案

  • 图片压缩：在上传时限制图片尺寸

    1. from PIL import Image
    2. import io
    4. def compress_image(img_bytes, max_size=(800, 800)):
    5.     img = Image.open(io.BytesIO(img_bytes))
    6.     img.thumbnail(max_size)
    7.     buffered = io.BytesIO()
    8.     img.save(buffered, format="JPEG", quality=85)
    9.     return buffered.getvalue()
  • API缓存机制：对相同图片生成结果进行缓存

五、完整项目源码获取

项目完整代码已托管至GitHub，包含以下内容：

  1. 前后端完整源代码
  2. 部署文档与配置说明
  3. 测试用例与API调用示例
  4. 扩展功能开发指南

获取方式：

  1. git clone https://github.com/your-repo/ai-poem-generator.git
  2. cd ai-poem-generator
  3. pip install -r requirements.txt
  4. python app.py

六、常见问题解决方案

  1. API调用失败：

    • 检查Access Token有效期
    • 确认API请求参数格式
    • 查看百度智能云控制台调用限额

  2. 图片处理异常：

    • 限制上传文件类型（accept="image/*"）
    • 添加文件大小限制（Flask配置MAX_CONTENT_LENGTH）

  3. 跨域问题：

    • 在Flask中添加CORS支持：
      1. from flask_cors import CORS
      2. app = Flask(__name__)
      3. CORS(app)

七、扩展功能建议

  1. 多风格诗歌生成：通过API参数指定诗歌体裁（五言/七言/现代诗）
  2. 历史记录管理：使用SQLite存储用户生成记录
  3. 社交分享功能：集成分享按钮生成带诗歌的图片
  4. 多语言支持：扩展API调用支持中英文诗歌生成

本项目完整实现了从图片上传到诗歌生成的全流程，开发者可根据实际需求进行二次开发。通过调用文心一言强大的自然语言处理能力，结合简洁的Web交互设计，可快速构建出具有实用价值的AI应用。

相关文章推荐

发表评论

最热文章

关于作者

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