ChatGPT:5. 使用OpenAI API创建自己的AI网站:4. flask框架网页界面上下载OpenAI API请求的图片

ChatGPT:5. 使用OpenAI API创建自己的AI网站:4. flask框架网页界面上下载OpenAI API请求的图片

如果你还是一个OpenAI的小白,有OpenAI的账号,但想调用OpenAI的API搞一些有意思的事,那么这一系列的教程将仔细的为你讲解如何使用OpenAI的API制作属于自己的AI网站。博主只能利用下班时间更新,进度慢,请海涵🥳。

3. 🎖️网页界面上图片的下载

🐒回顾:上一节,我们已经把OpneAI返回的图片显示到网页界面了,本节我们将添加一个"下载"按钮,单击后,将文件保存到本地。跳转到上一节

🐥1. 先修改Html文件,添加一个button。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/" method="post">
        <input type="text" name="desc" placeholder="请输入描述信息">
        <button>创作图画</button>

</form>
<!--显示图片-->
<div>
    {% if result %}
        <img src="{{ result }}" alt="">
        <div>
            <a href="/download?img_url={{result|urlencode}}"><button>下载</button></a>
        </div>
    {% endif %}
</div>
</body>
</html>

🐣2. 后端代码修改如下:

from flask import Flask, render_template, request, redirect, url_for, make_response
import openai
import requests
from uuid import uuid1 # 防止文件名重复,或者可以时间戳
api_key = "sk-e4F4owyBicdBYKA9RuuM*"  # 此处是自己的API Key
openai.api_key = api_key


app = Flask(__name__)


@app.route('/', methods=['GET', 'POST'])
def index():

    # 接收POST请求
    if request.method == 'POST':  # 接收表单处理
        desc = request.form['desc']
        print(desc)

        # 此处为OpenAI的API代码
        response = openai.Image.create(
            prompt=desc,
            n=1,
            size="512x512"
        )

        image_url = response['data'][0]['url']

        print(image_url)
        return redirect(url_for('index', result=image_url))  # 跳转到当前界面下,并将image_url返回到页面中

    # 接收GET请求
    elif request.method == 'GET':  # 接收表单处理
        result = request.args.get("result")
        return render_template('index.html', result=result)




@app.route('/download/')
def download():
    # 获取url
    img_url = request.args.get('img_url')  # 获取url地址
    res = requests.get(img_url)  # 得到一个响应
    if res.status_code != 200:  # 检查响应,成功时应该是200
        return "请求失败!"

    # 1. 根据url爬取照片,获取图片二进制文件res = requests.get(url)
    response = make_response(res.content)  # 
    # 2. 保存文件,类型为图片
    response.headers['Content-Type'] = 'image/png'
    response.headers['Content-Disposition'] = f"attachment;filename={uuid1()}.png"
    return response


@app.route('/debug')
def debug():
    return 'I am Demo.'


if __name__ == '__main__':
    app.run(debug=True, port=8888)


🦩3. 运行代码后,效果下图。单击下载按钮后,会随机生成一个名字并下载到本地。
在这里插入图片描述
🦉4. 下一节,我们将对界面进行美化,添加CSS。未完待续,敬请期待~
在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一只小Demo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值