在Django中使用Gradio，为后面的开发做好准备

原创

IT蜗壳-Tango

修改于 2024-07-07 18:59:09

4633

修改于 2024-07-07 18:59:09

文章被收录于专栏：Django从入门到实践

简介

在前面的文章中，我们已经学习了一些基础知识。现在，我们将正式开始项目的搭建。本项目的组成包括以下两个主要部分：

提示词以及各种API均配置在Django中。

用户交互则使用最近非常流行的Gradio框架。

在本地开发时，我们将暂时手动启动Gradio项目。后期准备上线时，将各个服务放到Docker中，让它们各自自动启动。

创建Gitee的项目仓库

为了项目的版本管理以及后期推送到服务器，我建议大家把代码都上传到Gitee上，之所以没有使用GitHub是因为它的访问不是很稳定。

项目名称大家自己根据喜好来填写，但是最好要有意义。

进入到我的工作区clone一下项目

cd workspace
cd tango-ai

创建虚拟环境

运行以下命令创建虚拟环境，并安激活虚拟环境

conda create -n ai_web -y
conda activate ai_web

安装必要的基础库，后续还会安装其他的库

pip install django gradio -i https://pypi.tuna.tsinghua.edu.cn/simple

创建项目

进入到我们的工作目录下(你任意保存代码的位置，但最好不要用中文或者特殊字符)，运行以下命令创建项目

django-admin startproject config
mv config/ AI_Web/
python manage.py startapp AI

这里我们先创建一个叫config的项目(这个是我的个人习惯，方便后面的项目管理)，django会自动创建一个config的项目目录，我们再将它修改为一个其他更符合我们项目的名字，例如我这里改成了AI_Web。进入到项目里面我们再创建一个名为AI的APP。

为了后续编码方便，我们后续的操作将会在IDE中进行，这里我使用的PyCharm你可以根据自己的喜好选择其他的编辑，如果你是第一次接触Django，我建议你和我使用同样的IDE，这样更不容易出错。

将我们创建好的AIAPP添加到config文件夹中的settings.py中。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'AI'
]

将Gradio集成到Django中

我们在APP目录下创建一个gradio_interface.py文件，内容如下：

import gradio as gr

def greet(name):
    return f"Hello {name}!"

iface = gr.Interface(fn=greet, inputs="text", outputs="text")
iface.launch(server_name="0.0.0.0", server_port=7860)

在 Django 视图中嵌入 Gradio 接口,修改views.py文件

from django.shortcuts import render


def gradio_view(request):
    gradio_url = "http://localhost:7860/"  # 使用Gradio生成的共享链接
    return render(request, 'gradio.html', {'gradio_url': gradio_url})

并在APP的目录下创建一个templates文件夹，然后创建一个gradio.htmlHTML文件,并在其中包含一个用于显示 Gradio 接口的占位符：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradio Interface</title>
</head>
<body>
    <iframe src="{{ gradio_url }}" width="100%" height="100%" frameborder="0"></iframe>
</body>
</html>

在APP的目录下创建一个urls.py文件，并修改内容如下：

from django.urls import path
from .views import gradio_view

urlpatterns = [
    path('gradio/', gradio_view, name='gradio_view'),
]

将建APP的urls.py添加到项目的urls.py文件中

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('AI.urls')),
]

我们先启动一下Gradio服务器看看效果如何