DALL·E生成的图像
想象一个从不睡觉、从不休息并且能够轻松处理多种任务的个人助手。在当今的数字时代，AI 动力工具将这一愿景变为现实。我们将使用 Django 和 ChatGPT 创建一个虚拟助手控制面板。这个项目结合了 Django 的简便性和 OpenAI 的强大功能，提供了一个直观的互动界面，让你与虚拟助手互动更流畅。
一个虚拟助手可以节省时间，简化工作流程，并提供即时帮助。不论是开发者、学生还是专业人士，拥有这样一个全天候的助手可以大大提升你的效率。准备好自己动手做一个了吗？让我们开始吧！
第一步：设置您的 Django 项目吧为你的项目新建一个文件夹:
在以下命令中，我们将创建一个名为virtual_assistant_dashboard的目录并进入该目录。
mkdir virtual_assistant_dashboard
cd virtual_assistant_dashboard2. 步骤2: 创建虚拟环境:
python -m venv env
source ./env/bin/activate # 在 Windows 系统中请改为：env\\Scripts\\activate3. 安装需要的包：
在终端中运行以下命令:
pip install django openai4. 创建一个新的Django项目和应用吧。
# 创建名为 assistant_project 的新 Django 项目
django-admin startproject assistant_project .
# 在项目中创建一个新的应用 dashboard
python manage.py startapp dashboard5. 更新设置: **assistant_project/settings.py**
# 配置已安装的应用程序
INSTALLED_APPS = [
# ...
'dashboard',
]
# 模板配置
TEMPLATES = [
{
# ...
'DIRS': [BASE_DIR / '模板'],
# ...
},
]
# 设置静态文件的URL
STATIC_URL = '/static/'
# 设置静态文件的目录
STATICFILES_DIRS = [BASE_DIR / 'static']
# OpenAI API密钥
OPENAI_API_KEY = 'your_api_key_here'我们需要建立一个dashboard/views.py文件：
import openai
from django.shortcuts import render
from django.conf import settings
# 初始化OpenAI API密钥
openai.api_key = settings.OPENAI_API_KEY
def 虚拟助手仪表盘(request):
if request.method == 'POST':
user_input = request.POST.get('user_input', '')
response = openai.ChatCompletion.create(
model="gpt-3.5-turbo",
messages=[
{"role": "system", "content": "你是一个乐于助人的虚拟助手。"},
{"role": "user", "content": user_input}
]
)
assistant_response = response.choices[0].message['content']
return render(request, 'dashboard/dashboard.html', {'user_input': user_input, 'response': assistant_response})
return render(request, 'dashboard/dashboard.html'2. 创建一个**dashboard/urls.py**：
from django.urls import path
from . import views
urlpatterns = [
path('', views.assistant_dashboard, name='助理仪表板'),
]3. 更新一下**assistant_project/urls.py**:
从 django.contrib 导入 admin
从 django.urls 导入 path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('dashboard.urls')),
]第3步：创建模板
- 在文件
**模板/base.html**中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>虚拟助手控制面板</title>
{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<header>
<h1>虚拟助手控制面板</h1>
</header>
<main>
{% block content %}
{% endblock %}
</main>
<footer>
<p>版权所有 2025 虚拟助手控制面板</p>
</footer>
</body>
</html>2. 在**templates/dashboard/dashboard.html**里：
{% extends 'base.html' %}
{% block content %}
<div class="chat-container">
{% if response %}
<div class="chat-message user-message">
<p>你: {{ user_input }}</p>
</div>
<div class="chat-message assistant-message">
<p>助手: {{ response|safe }}</p>
</div>
{% endif %}
</div>
<form method="post" class="input-form">
{% csrf_token %}
<input type="text" name="user_input" placeholder="有什么问题吗？">
<button type="submit">发出</button>
</form>
{% endblock %}- 新建
**static/css/style.css**：创建这个样式表文件。
body {
font-family: Arial, sans-serif; /* 字体设置为Arial或无衬线字体 */
line-height: 1.6; /* 行高设置为1.6 */
margin: 0; /* 边距设置为0 */
padding: 0; /* 内边距设置为0 */
background-color: #e8f5e9; /* 设置页面背景颜色 */
color: #333; /* 设置文本颜色 */
}
header {
background-color: #4caf50; /* 设置头部背景颜色 */
color: white; /* 设置文本颜色 */
text-align: center; /* 文本居中对齐 */
padding: 1rem; /* 内边距设置为1rem */
}
main {
padding: 2rem; /* 内边距设置为2rem */
max-width: 800px; /* 最大宽度设置为800px */
margin: 0 auto; /* 水平居中对齐 */
}
.chat-container {
background-color: white; /* 设置背景颜色为白色 */
border-radius: 5px; /* 边框圆角设置为5px */
padding: 1rem; /* 内边距设置为1rem */
margin-bottom: 1rem; /* 设置底部边距为1rem */
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 设置阴影 */
}
.chat-message {
margin-bottom: 1rem; /* 设置底部边距为1rem */
}
.user-message {
text-align: right; /* 文本右对齐 */
color: #4caf50; /* 设置文本颜色 */
}
.assistant-message {
text-align: left; /* 文本左对齐 */
color: #2196f3; /* 设置文本颜色 */
}
.input-form {
display: flex; /* 设置为弹性布局 */
}
input[type="text"] {
flex-grow: 1; /* 设置弹性伸缩因子 */
padding: 0.5rem; /* 内边距设置为0.5rem */
border: 1px solid #ccc; /* 设置边框 */
border-radius: 3px 0 0 3px; /* 边框圆角设置 */
}
button {
background-color: #4caf50; /* 设置背景颜色 */
color: white; /* 设置文本颜色 */
border: none; /* 设置无边框 */
padding: 0.5rem 1rem; /* 内边距设置 */
border-radius: 0 3px 3px 0; /* 边框圆角设置 */
cursor: pointer; /* 设置鼠标样式为指针 */
}
button:hover {
background-color: #45a049; /* 当鼠标悬停时，背景颜色改变 */
}- 运行迁移然后启动服务器。
运行迁移命令，然后启动开发服务器，可以使用如下命令：
python manage.py migrate
python manage.py runserver2. 访问您的仪表盘： 启动浏览器并进入 http://127.0.0.1:/8000，与您的虚拟助手互动。
虚拟助手演示版
干得好！你已经搭建了一个由Django和ChatGPT支持的、功能齐全的虚拟助手控制面板。这个项目展示了AI和网页开发之间的协作，提供了一个干净且易于使用的界面来和你的助手互动。
随着你继续开发下去，可以考虑添加一些功能，比如对话记录、用户认证或与外部API的集成，来扩展助手的功能。让你的虚拟助手变得更加强大，潜力无限！
编程快乐！
- 关注我的Medium账号https://medium.com/@mathur.danduprolu以获取更多关于Django和web开发的教程。
- 在评论区分享您的经验和反馈——我很想听听您的意见！
- 别忘了给我点赞，并把这篇博客分享给您的朋友们。
让我们一起继续打造超赞的应用吧！🚀
[OOP]：面向对象编程
[CRUD]：增删改查
[JVM]：Java虚拟机
[SUT]：待测系统
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦