День 11: Створення інформаційної панелі для віртуального помічника з Django та ChatGPT

Зображення згенероване DALL.E

Уявіть собі особистого помічника, який ніколи не спить, завжди доступний і може без труднощів виконувати різноманітні завдання. У сучасну епоху цифрових технологій інструменти на базі штучного інтелекту роблять це бачення реальністю. У цьому блозі ми створимо інформаційну панель для віртуального помічника за допомогою Django та ChatGPT. Цей проєкт поєднує простоту Django з потужністю OpenAI, забезпечуючи інтуїтивно зрозумілий інтерфейс для безперешкодної взаємодії з вашим віртуальним помічником.

Віртуальний помічник може зекономити час, оптимізувати робочі процеси та забезпечити миттєву підтримку. Незалежно від того, чи ви розробник, студент або професіонал, наявність помічника 24/7 може значно підвищити вашу продуктивність. Готові створити власного? Давайте почнемо!

Крок 1: Налаштування вашого Django проєкту

1. Створіть нову директорію для вашого проєкту:

mkdir virtual_assistant_dashboard  
cd virtual_assistant_dashboard

1. Налаштуйте віртуальне середовище:

python -m venv env  
source env/bin/activate # Наactivate

1. Встановіть необхідні пакети:

pip install django openai

1. Створіть новий проєкт Django та додаток:

django-admin startproject assistant_project .  
python manage.py startapp dashboard

5. Оновіть assistant_project/settings.py:

INSTALLED_APPS = [  
 ...  
 'dashboard',  
]  

TEMPLATES = [  
 {  
 # ...  
 'DIRS': [BASE_DIR / 'templates'],  
 # ...  
 },  
]  

STATIC_URL = '/static/'  
STATICFILES_DIRS = [BASE_DIR / 'static']  

OPENAI_API_KEY = 'your_api_key_here'

Крок 2: Створення інформаційної панелі для віртуального помічника

1. Створіть dashboard/views.py:

import openai  
from django.shortcuts import render  
from django.conf import settings  

openai.api_key = settings.OPENAI_API_KEY  

def assistant_dashboard(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": "You are a helpful virtual assistant."},  
 {"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

1. Створіть dashboard/urls.py:

from django.urls import path  
from . import views  

urlpatterns = [  
 path('', views.assistant_dashboard, name='assistant_dashboard'),  
]

1. Оновіть assistant_project/urls.py:

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

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

Крок 3: Створення шаблонів

1. У templates/base.html:

 {% load static %}  




Virtual Assistant Dashboard
    {% block content %}    {% endblock %}        
© 2025 Virtual Assistant Dashboard
       ```  2.
## В **`templates/dashboard/dashboard.html`**:

{% extends 'base.html' %}

{% block content %}

{% if response %}    

You: {{ userinput }}
Assistant: {{ response }}
{% endif %}
{% csrftoken %} Send {% endblock %}
```

Крок 4: Додавання стилів

1. Створіть static/css/style.css:

body {    
 font-family: Arial, sans-serif;    
 line-height: 1.6;    
 margin: 0;    
 padding: 0;    
 background-color: #e8f5e9;    
 color: #333;   
}    

header {    
 background-color: #4caf50;    
 color: white;    
 text-align: center;    
 padding: 1rem;   
}    

main {    
 padding: 2rem;    
 max-width: 800px;    
 margin: 0 auto;   
}    

.chat-container {    
 background-color: white;    
 border-radius: 5px;    
 padding: 1rem;    
 margin-bottom: 1rem;    
 box-shadow: 0 2px 5px rgba(0,0,0,0.1);   
}    

.chat-message {    
 margin-bottom: 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;    
 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;   
} 

Крок 5: Запуск проєкту

1. Запустіть міграції та сервер:

python manage.py migrate   
python manage.py runserver

1. Відвідайте вашу панель приладів:
   Відкрийте ваш браузер і перейдіть за посиланням http://127.0.0.1:8000/, щоб взаємодіяти з вашим віртуальним помічником.

Демо віртуального помічника

Вітаємо! Ви створили повністю функціональну панель для віртуального помічника, що працює на Django та ChatGPT. Цей проєкт підкреслює синергію між штучним інтелектом і веб-розробкою, надаючи чистий та зручний інтерфейс для взаємодії з вашим помічником.

Продовжуючи розробку, подумайте про додавання функцій, таких як історія розмов, автентифікація користувачів або інтеграція з зовнішніми API для розширення можливостей помічника. Небо — це межа, коли мова йде про покращення вашого віртуального помічника!

Щасливого кодування!

• Слідкуйте за мною на Medium для більше туторіалів по Django та веб-розробці.
• Поділіться своїм досвідом та відгуками в коментарях — я буду радий почути вашу думку!
• Не забудьте поставити лайк і поділитись цим блогом з вашою мережею.

Давайте разом створювати дивовижні додатки! 🚀

Перекладено з: Day 11: Building a Virtual Assistant Dashboard with Django and ChatGPT