当前位置： 首页 > news >正文

ChatGPT：使用OpenAI创建自己的AI网站，使用 flask web框架快速搭建网站主体

news 2025/10/31 2:56:58

使用OpenAI创建自己的AI网站

如果你还是一个OpenAI的小白，有OpenAI的账号，但想调用OpenAI的API搞一些有意思的事，那么这一系列的教程将仔细的为你讲解如何使用OpenAI的API制作属于自己的AI网站。

使用 flask web框架快速搭建网站主体

之前我们已经调用了OpenAI的API接口请求一张"小白猫"

import openaiapi_key = "sk-e4F4owy**********************"  # 此处是自己的API Key
openai.api_key = api_keyresponse = openai.Image.create(prompt = "a white siamese cat",n = 1,size = "1024x1024"
)
image_url = response['data'][0]['url']print(image_url)

今天我们将快速搭建一个简易的网页，在网页里，我们输入我们的请求，让OpenAI为我们提供一张照片。

  1. 制作自己的AI网站，我们就需要使用python的web框架了。这里我们用到了flask框架。python常用的web框架主要是flask和Django。至于两个框架的区别，我们让ChatGPT给大家讲一下：

你好，想问一下flask框架和Django框架的区别，谢谢！

Flask框架和Django框架的主要区别如下：

1.Flask 是一种轻量级的框架，而Django 是一种重量级框架。Flask本质上是一个微型框架，框架的基本框架非常精炼，适合快速开发各种简单的项目，而Django相对来说代码比较复杂，一般用来开发各种复杂的项目。

2.Flask只能用Python语言编写，而 Django 支持 Python 、Java 以及 JavaScript 等多种编程语言。

3.Flask主要用于开发 API、Web服务 以及个性化网页，而 Django 则更适合建立复杂的网站和应用程序，例如媒体站点、博客、社交网站等。

4.Flask 没有实现 ORM，其模板也不大受欢迎，而 Django 框架有一个成熟的 ORM 系统和众多受欢迎的模板引擎，使用户处理数据库查询和 HTML 模板编写方面变得非常容易。

  1. 老生常谈，首先安装flask框架：
pip install flask
  1. 安装完成后我们先小试一下。相信大家学每一种语言时，第一条语句都是输出一个hello world. 那么我们今天也用flask框架在网页输出一个: Life is short, I need python.
from flask import Flaskapp = Flask(__name__)@app.route('/')
def index():return 'Life is short, I need python.'@app.route('/debug')
def debug():return 'I am Demo.'if __name__ == '__main__':app.run(debug=True, port=8888)
  1. 运行后，在控制台中可以看到网址，点击进入：


  1. @app.route(‘/’) 括号里是路由的名字，我们可以通过不同的路由名访问不同的内容，比如访问http://127.0.0.1:8888/得到的是：Life is short, I need python. 访问http://127.0.0.1:8888/debug,我们得到的就是I am Demo.

  1. 从代码中可以看出，实际return的就是html代码，我们可以把整个html都拷贝到return后面，但是不够友好，也不方便调试。所以我们需要用到flask的另一个类：render_template。使用方法：render_template(‘index.html’)
from flask import Flask, render_templateapp = Flask(__name__)@app.route('/')
def index():return render_template('index.html')@app.route('/debug')
def debug():return 'I am Demo.'if __name__ == '__main__':app.run(debug=True, port=8888)
  1. 我们需要在项目目录下新建一个templates文件夹，flask会自动到这个文件夹寻找对应的html文件子。然后我们在templates文件夹内新建一个index.html 文件，修改一下body的内容：Demo’s Html!
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>Demo's Html!
</body>
</html>



  1. 现在我们就要操作index.html这个文件了。先在界面中添加一个表单，然后添加输入框和按钮：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action=""><input type="text" placeholder="请输入描述信息"><button>创作图画</button>
</form>
</body>
</html>
  1. 这样我们就得到了一个非常"美观"的界面了:

  1. 之后我们想要实现的就是：按下按钮后，把输入框里的文本传递给后台。这样后台就可以将我们传递过来文本提交给OpenAI去请求图片了。
  2. Html文件如下，需要增加的是：1. 表单参数：method=“post”（此处对应后台的处理方法）；2. input处增加：name=“desc”（desc将传递给后台）。即：传递方式和传递内容。
<!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>
</body>
</html>
  1. 后台代码如下，增加：methods=[‘GET’, ‘POST’]（用于接收和发送）和表单接收部分的代码
from flask import Flask, render_template, requestapp = Flask(__name__)@app.route('/', methods=['GET', 'POST'])
def index():# 此处我们应该接收html界面的文本if request.method == 'POST':  # 接收表单处理desc = request.form['desc']print(desc)return render_template('index.html')@app.route('/debug')
def debug():return 'I am Demo.'if __name__ == '__main__':app.run(debug=True, port=8888)
  1. 关于GET和POST的提交方式，可以简单理解为：直接刷新或访问页面为GET；提交给后台的话是POST。
  2. 我们可以试一下在控制台，是否接收到了页面的内容。

  1. 接着我们将OpenAI请求那部分代码拷贝到接收表单处理的位置。
from flask import Flask, render_template, request
import openaiapi_key = "sk-e4F4owy**********************"  # 此处是自己的API Key
openai.api_key = api_keyapp = Flask(__name__)@app.route('/', methods=['GET', 'POST'])
def index():# 此处我们应该接收html界面的文本if request.method == 'POST':  # 接收表单处理desc = request.form['desc']print(desc)# 此处为OpenAI的API代码response = openai.Image.create(prompt=desc,n=1,size="1024x1024")image_url = response['data'][0]['url']print(image_url)return render_template('index.html')@app.route('/debug')
def debug():return 'I am Demo.'if __name__ == '__main__':app.run(debug=True, port=8888)
  1. 输入想要让OpenAI创作的描述，单击 创作图画。查看后台是否接收到了页面的信息，并返回一个url。

  1. 我们来看看在OpenAI的脑子里，2050年的地球是什么样子的。

  1. 此时图片还只是一个url，需要我们从后台鼠标点击打开，如何显示到页面上呢，我们下节再谈，未完待续，请持续关注~

相关文章：

ChatGPT：使用OpenAI创建自己的AI网站，使用 flask web框架快速搭建网站主体

使用OpenAI创建自己的AI网站 如果你还是一个OpenAI的小白&#xff0c;有OpenAI的账号&#xff0c;但想调用OpenAI的API搞一些有意思的事&#xff0c;那么这一系列的教程将仔细的为你讲解如何使用OpenAI的API制作属于自己的AI网站。 使用 flask web框架快速搭建网站主体 之前…...

编程日记 2023/6/4 19:56:51

后端（一）：Tomcat

我们之前的前端是被我们一笔带过的&#xff0c;那不是我们要讲的重点&#xff0c;而这里的后端则是重点。本章先来认识认识后端的基础。 Tomcat 是什么 我们先来聊聊什么叫做tomcat&#xff0c;我们熟悉的那个是汤姆猫&#xff1a; 这和我们Java世界中的Tomcat 不是同一只猫&…...

编程日记 2023/6/4 19:51:50

华为OD机试之最小调整顺序次数、特异性双端队列（Java源码）

最小调整顺序次数、特异性双端队列 题目描述 有一个特异性的双端队列&#xff0c;该队列可以从头部或尾部添加数据&#xff0c;但是只能从头部移出数据。 小A依次执行2n个指令往队列中添加数据和移出数据。其中n个指令是添加数据&#xff08;可能从头部添加、也可能从尾部添加…...

编程日记 2023/6/4 19:46:49

2023年武汉住建厅七大员怎么报名?报名流程？精准题库一次过？？

2023年武汉住建厅七大员怎么报名?报名流程&#xff1f;精准题库一次过&#xff1f;&#xff1f; 2023年武汉住建厅七大员是指施工员、质量员、资料员、材料员、机械员、标准员、劳务员&#xff0c;报的最多的可能就是施工员&#xff0c;质量员和资料员 报名流程&#xff1a; 1…...

编程日记 2023/6/4 19:41:48

Rust每日一练(Leetday0014) 组合总和II、缺失正数、接雨水

目录 40. 组合总和 II Combination Sum II &#x1f31f;&#x1f31f; 41. 缺失的第一个正数 First Missing Positive &#x1f31f;&#x1f31f;&#x1f31f; 42. 接雨水 Trapping Rain Water &#x1f31f;&#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题…...

编程日记 2023/6/4 19:36:47

EnjoyVIID部署

1、下载 git clone https://gitee.com/tsingeye/EnjoyVIID.git 2、导入数据库 创建表enjoyviid 导入数据库(修改数据库文件里的编码) EnjoyVIID/sql/tsingeye-viid.sql 3、修改配置 vim EnjoyVIID/tsingeye-admin/src/main/resources/application-dev.yml 修改数据库连接、re…...

编程日记 2023/6/4 19:31:46

用Python解决爱因斯坦的数学问题

1 问题 有一条阶梯&#xff0c;若每步跨2阶&#xff0c;则剩最后一阶&#xff0c;若每步跨3阶&#xff0c;则最后剩2阶&#xff0c;若每步跨5阶&#xff0c;则最后剩4阶&#xff0c;若每步跨6阶&#xff0c;则最后剩5阶&#xff0c;只有每次跨7阶&#xff0c;最后才刚好不剩&am…...

编程日记 2023/6/4 19:26:45

ChatGPT提示词攻略之基本原则

下面是调用openai的completion接口的函数。但在本文中并不是重点。了解一下就好。 import openai import osfrom dotenv import load_dotenv, find_dotenv _ load_dotenv(find_dotenv())openai.api_key os.getenv(OPENAI_API_KEY)def get_completion(prompt, model"gp…...

编程日记 2023/6/4 19:21:44

抖音seo源码如何开发部署？

前言&#xff1a;抖音seo源码&#xff0c;抖音矩阵系统源码搭建&#xff0c;抖音矩阵同步分发。抖音seo源码部署是需要对接到这些正规接口再来做开发的&#xff0c;目前账号矩阵程序开发的功能&#xff0c;围绕一键管理多个账号&#xff0c;做到定时投放&#xff0c;关键词自动…...

编程日记 2023/6/4 19:16:43

Java中常见锁的分类及概念分析

基于线程对同一把锁的获取情况分类 可重入锁 同一个线程可以多次获取锁 每次获取锁&#xff0c;锁的计数器加1&#xff0c;每次释放锁锁的计数器减1 锁的计数器归零&#xff0c;锁完全释放 Java中提供的synchronized&#xff0c;ReentrantLock&#xff0c;ReentrantReadWriteL…...

编程日记 2023/6/4 19:11:42

ConcurrentLinkedQueue的源码解析（基于JDK1.8）

ConcurrentLinkedQueue的源码解析&#xff08;基于JDK1.8&#xff09; ConcurrentLinkedQueue是Java集合框架中的一种线程安全的队列&#xff0c;它是通过CAS&#xff08;Compare and Swap&#xff09;算法实现的并发队列。在并发场景下&#xff0c;ConcurrentLinkedQueue能够…...

编程日记 2023/6/4 19:06:41

低资源方面级情感分析研究综述

文章目录 前言1. 引言2. 问题定义、数据集和评价指标2.1 问题定义2.2 任务定义2.3 常用数据集 3. 方面级情感分析的方法3.1 **方面词抽取**3.1.1 基于无监督学习的方法3.1.1.1 基于规则的方面词抽取3.1.1.2 基于统计的方面词抽取 3.1.2 基于有监督浅层模型的方法3.1.3 基于有监…...

编程日记 2023/6/4 19:01:40

将 PDF 压缩到 1 MB 或更小的 5 个工具

鉴于工作和生活中PDF文件的频繁传输&#xff0c;压缩文件大小成为PDF文件必不可少的一步&#xff0c;尤其是对于包含大量高清图片的文件。压缩不仅使您的文件兼容发送&#xff0c;还有助于存储优化。这意味着您将获得更多数据空间&#xff0c;适用于本地设备和云端。 想要将 …...

编程日记 2023/6/4 18:56:39

CSMA/CD协议之计算最短帧长问题

文章目录 前言CSMA/CD协议计算最短帧长 前言 本篇博客主要论述了如何计算 CSMA/CD 协议下的网络帧长问题&#xff0c;从概念入手&#xff0c;结合例题进行详细的分析。 CSMA/CD协议 概念&#xff1a; ① 载波监听多点接入/碰撞检测 ② 半双工通信 ③ 先听后发、边听边发、冲…...

编程日记 2023/6/4 18:51:38

第三章：什么是分库分表

文章目录 背景什么是分库分表为什么要分库分表性能可用性什么时候考虑分库分表什么时候分库什么时候分表背景 一个系统当伴随着用户量的激增，业务数据的不断增加，数据库表中的数据越来越多，如果再去对我们数据库中的表进行curd操作的时候，就会造成一些性能上的瓶颈问题！ …...

编程日记 2023/6/4 18:46:37

SpringMVC第六阶段：数据在域中的保存（02）

数据在域中的保存&#xff08;02&#xff09; 1、Map或Model或ModelMap形式保存数据在request域中 在四个域中&#xff0c;我们使用最频繁的域就是request对象。往request域对象中&#xff0c;保存数据&#xff0c;还在以下的几种形式。 我们可以在Controller的方法中&#x…...

编程日记 2023/6/4 18:41:35

Springboot +spring security，认证方式---HTTP基本认证的实现

一.简介 这篇文章来学习下security的认证方式其中的HTTP基本认证。 二.Spring Security的认证方式 2.1什么是认证 认证: 就是用来判断系统中是否存在某用户&#xff0c;并判断该用户的身份是否合法的过程&#xff0c;解决的其实是用户登录的问题。认证的存在&#xff0c;是…...

编程日记 2023/6/4 18:36:34

2023年系统分析师案例及论文（回忆版）

2023年5月27日&#xff0c;全国计算机等级上半年考试如期举行 北京市软件分析师考试地点在北京市对外贸易学校&#xff0c;早上外面下起雨&#xff0c;正如考前紧张的心情。 看考场分布图&#xff0c;44个考场&#xff0c;推测有44*301320名考生&#xff0c;本人所在的考场&am…...

编程日记 2023/6/4 18:31:33

数据结构与算法面试题

&#xff08;1&#xff09; 红黑树的了解&#xff08;平衡树&#xff0c;二叉搜索树&#xff09;&#xff0c;使用 场景 把数据结构上几种树集中的讨论一下&#xff1a; 1.AVLtree 定义&#xff1a;最先发明的自平衡二叉查找树。在AVL树中任何节点的两个子树的高度最大差别为一…...

编程日记 2023/6/4 18:26:32

C Primer Plus第十章编程练习答案

学完C语言之后&#xff0c;我就去阅读《C Primer Plus》这本经典的C语言书籍&#xff0c;对每一章的编程练习题都做了相关的解答&#xff0c;仅仅代表着我个人的解答思路&#xff0c;如有错误&#xff0c;请各位大佬帮忙点出&#xff01; 1.修改程序清单10.7的rain.c程序&…...

编程日记 2023/6/4 18:21:31

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2025/10/30 10:46:33

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2025/10/29 12:08:57

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/10/11 3:56:08

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/10/11 0:24:31

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

编程新知 2025/10/25 10:20:33

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2025/10/18 4:35:35

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

编程新知 2025/10/25 21:14:56

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

编程新知 2025/10/27 23:44:49

QT开发技术【ffmpeg + QAudioOutput】音乐播放器

一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下&#xff0c;音视频内容犹如璀璨繁星&#xff0c;点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频&#xff0c;到在线课堂中知识渊博的专家授课&#xff0c;再到影视平台上扣人心弦的高清大片&#xff0c;音…...

编程新知 2025/10/28 10:44:30

篇章二 论坛系统——系统设计

目录 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 1. 数据库设计 1.1 数据库名: forum db 1.2 表的设计 1.3 编写SQL 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 通过需求分析获得概念类并结合业务实现过程中的技术需要&#x…...

编程新知 2025/10/26 3:38:59