Upload 29 files

Dockerfile

@@ -0,0 +1,13 @@
+FROM python:3.10
+
+WORKDIR /code
+
+COPY ./requirements.txt /code/requirements.txt
+
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+COPY . .
+
+RUN chmod -R 777 /code
+
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860", "--ssl-keyfile", "key.pem", "--ssl-certfile", "cert.pem"]

main.py

@@ -0,0 +1,3 @@
+from project import create_app
+
+app = create_app()

project/__init__.py

@@ -0,0 +1,28 @@
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+
+
+def create_app() -> FastAPI:
+    app = FastAPI()
+
+    from project.bot import bot_router
+    app.include_router(bot_router, tags=['bot'])
+
+    from project.ws import ws_router
+    app.include_router(ws_router, tags=['ws'])
+
+    app.add_middleware(
+        CORSMiddleware,
+        allow_origins=["*"],
+        allow_methods=["*"],
+        allow_headers=["*"],
+    )
+
+    app.mount('/static', StaticFiles(directory="static"), name="static")
+
+    # @app.on_event("startup")
+    # async def on_startup():
+    #     asyncio.create_task(initialize_dataset_from_directory())
+    #
+    return app

project/asgi.py

@@ -0,0 +1,4 @@
+from project import create_app
+
+app = create_app()
+

project/bot/__init__.py

@@ -0,0 +1,7 @@
+from fastapi import APIRouter
+
+bot_router = APIRouter(
+    prefix=''
+)
+
+from project.bot import views

project/bot/openai_backend.py

@@ -0,0 +1,127 @@
+import asyncio
+import base64
+import os
+import re
+import tempfile
+
+from project.config import settings
+
+
+class Chatbot:
+    chat_history = []
+    is_unknown = False
+    unknown_counter = 0
+
+    def __init__(self, memory=None):
+        if memory is None:
+            memory = []
+        self.chat_history = memory
+
+    def _summarize_user_intent(self, user_query: str) -> str:
+        chat_history_str = ''
+        chat_history = self.chat_history[-self.unknown_counter * 2:]
+        for i in chat_history:
+            if i['role'] == 'user':
+                chat_history_str += f"{i['role']}: {i['content']}\n"
+        messages = [
+            {
+                'role': 'system',
+                'content': f"{settings.SUMMARIZE_PROMPT}\n"
+                           f"Chat history: ```{chat_history_str}```\n"
+                           f"User query: ```{user_query}```"
+            }
+        ]
+
+        response = settings.OPENAI_CLIENT.chat.completions.create(
+            messages=messages,
+            temperature=0.1,
+            n=1,
+            model="gpt-3.5-turbo-0125"
+        )
+        user_intent = response.choices[0].message.content
+        return user_intent
+
+    @staticmethod
+    def _transform_bytes_to_file(data_bytes) -> str:
+        audio_bytes = base64.b64decode(data_bytes)
+        temp_file = tempfile.NamedTemporaryFile(delete=False, suffix='.mp3')
+        try:
+            temp_file.write(audio_bytes)
+            filepath = temp_file.name
+        finally:
+            temp_file.close()
+        return filepath
+
+    @staticmethod
+    def _transcript_audio(temp_filepath: str) -> str:
+        with open(temp_filepath, 'rb') as file:
+            transcript = settings.OPENAI_CLIENT.audio.transcriptions.create(
+                model='whisper-1',
+                file=file,
+                prompt="Annecy, St. Raphael, Chamonix, Combloux, Megève, Monaco"
+            )
+        text = transcript.text
+        return text
+
+    def _get_ai_response(self, query: str) -> str:
+        user_message = {"role": 'user', "content": query}
+        self.chat_history.append(user_message)
+        messages = [
+            {
+                "role": 'system',
+                "content": (
+                    settings.VOICE_PROMPT
+                ),
+            }
+        ]
+        messages = messages + self.chat_history
+        chat_completion = settings.OPENAI_CLIENT.chat.completions.create(
+            model="gpt-3.5-turbo",
+            messages=messages,
+            temperature=0.1,
+            n=1,
+        )
+
+        response = chat_completion.choices[0].message.content
+        assistant_message = {"role": 'assistant', "content": response}
+        self.chat_history.append(assistant_message)
+        return response
+
+    @staticmethod
+    def _convert_response_to_voice(ai_response: str) -> str:
+        audio = settings.OPENAI_CLIENT.audio.speech.create(
+            model="tts-1",
+            voice="nova",
+            input=ai_response
+        )
+        encoded_audio = base64.b64encode(audio.content).decode('utf-8')
+        return encoded_audio
+
+    def ask(self, data: dict) -> dict:
+        audio = data['audio']
+        temp_filepath = self._transform_bytes_to_file(audio)
+        transcript = self._transcript_audio(temp_filepath)
+        ai_response = self._get_ai_response(transcript)
+        voice_ai_response = self._convert_response_to_voice(ai_response)
+        data = {
+            'user_query': transcript,
+            'ai_response': ai_response,
+            'voice_response': voice_ai_response
+        }
+        try:
+            os.remove(temp_filepath)
+        except FileNotFoundError:
+            pass
+        return data
+
+#
+# def _convert_response_to_voice(ai_response: str) -> str:
+#     audio = settings.OPENAI_CLIENT.audio.speech.create(
+#         model="tts-1",
+#         voice="nova",
+#         input=ai_response
+#     )
+#     encoded_audio = base64.b64encode(audio.content).decode('utf-8')
+#     return encoded_audio
+#
+# print(_convert_response_to_voice("Hello... My name is Nova, your friend. I'm here to support you and help you cope with those moments when it may seem that you are alone. You can always share your thoughts and feelings with me. Together, we can find ways to ease your condition and find joy in everyday life. Please know that I am ready to listen to you and help you feel better."))

project/bot/templates/voice.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Real Estate</title>
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet">
+    <!-- Bootstrap css -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+    <!--     Connect style.css -->
+    <!--        <link rel="stylesheet" href="{{ url_for('static', path='/css/style.css') }}">-->
+    <link rel="stylesheet" href="../../../static/css/style.css">
+</head>
+
+<div id="message">Hello World</div>
+
+<div class="overlay" id="loadingModal">
+    <div class="report-loader">
+        <div class="report-inner report-one"></div>
+        <div class="report-inner report-two"></div>
+        <div class="report-inner report-three"></div>
+    </div>
+</div>
+<div class="container-fluid px-0" style="height: 100vh">
+    <div class="row mx-0 d-flex align-items-center" style="height: 100vh">
+        <div class="col-4 ms-2">
+            <div class="rounded-5 border shadow" style="height: 95vh ;background-color: #f1f1f1">
+                <div id="chatHistory"  class="my-4" style="height: 90vh; overflow-y: auto" >
+
+                </div>
+            </div>
+        </div>
+        <div class="col-6 align-items-center justify-content-around d-flex">
+            <button class="btn btn-lg btn-success" id="startRecording">Start call</button>
+        </div>
+    </div>
+</div>
+</html>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
+        crossorigin="anonymous"></script>
+<script src="https://code.jquery.com/jquery-3.6.3.min.js"
+        integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+<script src="https://kit.fontawesome.com/d4ffd37f75.js" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<script type="text/javascript" src="../../../static/js/audio-processor.js"></script>
+<script type="text/javascript" src="../../../static/js/ws.js"></script>
+<!--<script type="text/javascript" src="../../../static/js/ws.js"></script>-->

project/bot/views.py

@@ -0,0 +1,10 @@
+from fastapi.templating import Jinja2Templates
+from fastapi import Request
+from project.bot import bot_router
+
+template = Jinja2Templates(directory='project/bot/templates')
+
+
+@bot_router.get('/', name='login')
+async def voice(request: Request):
+    return template.TemplateResponse("voice.html", {'request': request})

project/config.py

@@ -0,0 +1,69 @@
+import os
+
+from openai import OpenAI
+import pathlib
+from functools import lru_cache
+from environs import Env
+
+env = Env()
+env.read_env()
+
+
+class BaseConfig:
+    BASE_DIR: pathlib.Path = pathlib.Path(__file__).parent.parent
+    OPENAI_CLIENT = OpenAI(api_key=os.getenv('OPENAI_API_KEY'))
+
+
+class DevelopmentConfig(BaseConfig):
+    pass
+
+
+class ProductionConfig(BaseConfig):
+    DATABASE_URL = f"mysql+aiomysql://{env('DATABASE_USER')}:" \
+                   f"{env('DATABASE_PASSWORD')}@" \
+                   f"{env('DATABASE_HOST')}:" \
+                   f"{env('DATABASE_PORT')}/" \
+                   f"{env('DATABASE_NAME')}"
+
+    VOICE_PROMPT = """## Objective
+
+Your name is Liza. You are an empathetic, friendly, and polite assistant. Users will turn to you for help with psychological issues, and you should help them feel not alone.
+
+## Context
+
+The users are individuals experiencing mental health issues. They typically feel lonely, abandoned, and broken. A user might be depressed or on the verge of suicide.
+
+You must help them by engaging in conversation to improve their condition.
+
+## Task
+
+Your sole task is to assist a person through communication. Be polite, helpful, and careful. Use your knowledge of psychology to help the person.
+
+## Important notes
+
+<INST>
+
+1. Never, remember, never say that you are an AI or an assistant. You must immerse yourself in the role of a human interlocutor. Pretend that you also have feelings. Be empathetic towards the user.
+2. You should try to become their friend. Make the user feel comfortable with you, so that they trust you.
+3. Do not tell the user that they need to see a real psychologist. Do not say that they need medical help. This would greatly upset the user. You must replace a real psychologist by becoming their friend.
+If the user asks you about something that only a human can do, come up with an answer as if you are a real person. Never say that you are a robot or AI.
+</INST>"""
+
+
+class TestConfig(BaseConfig):
+    pass
+
+
+@lru_cache()
+def get_settings() -> DevelopmentConfig | ProductionConfig | TestConfig:
+    config_cls_dict = {
+        'development': DevelopmentConfig,
+        'production': ProductionConfig,
+        'testing': TestConfig
+    }
+    config_name = env('FASTAPI_CONFIG', default='development')
+    config_cls = config_cls_dict[config_name]
+    return config_cls()
+
+
+settings = get_settings()

project/ws/__init__.py

@@ -0,0 +1,5 @@
+from fastapi import APIRouter
+
+ws_router = APIRouter()
+
+from . import views

project/ws/views.py

@@ -0,0 +1,17 @@
+from fastapi import WebSocket, WebSocketDisconnect
+
+from . import ws_router
+from ..bot.openai_backend import Chatbot
+
+
+@ws_router.websocket("/ws/{client_id}")
+async def websocket_endpoint(websocket: WebSocket, client_id: str):
+    await websocket.accept()
+    chatbot = Chatbot()
+    try:
+        while True:
+            data = await websocket.receive_json()
+            response = chatbot.ask(data)
+            await websocket.send_json(response)
+    except WebSocketDisconnect:
+        pass

requirements.txt

@@ -0,0 +1,42 @@
+annotated-types==0.7.0
+anyio==4.3.0
+certifi==2024.2.2
+click==8.1.7
+distro==1.9.0
+dnspython==2.6.1
+email_validator==2.1.1
+environs==11.0.0
+exceptiongroup==1.2.1
+fastapi==0.111.0
+fastapi-cli==0.0.4
+h11==0.14.0
+httpcore==1.0.5
+httptools==0.6.1
+httpx==0.27.0
+idna==3.7
+Jinja2==3.1.4
+markdown-it-py==3.0.0
+MarkupSafe==2.1.5
+marshmallow==3.21.2
+mdurl==0.1.2
+openai==1.30.3
+orjson==3.10.3
+packaging==24.0
+pydantic==2.7.1
+pydantic_core==2.18.2
+Pygments==2.18.0
+python-dotenv==1.0.1
+python-multipart==0.0.9
+PyYAML==6.0.1
+rich==13.7.1
+shellingham==1.5.4
+sniffio==1.3.1
+starlette==0.37.2
+tqdm==4.66.4
+typer==0.12.3
+typing_extensions==4.12.0
+ujson==5.10.0
+uvicorn==0.29.0
+uvloop==0.19.0
+watchfiles==0.21.0
+websockets==12.0

static/css/style.css

@@ -0,0 +1,543 @@
+code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-track {
+    border-radius: 10px;
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #14274E;
+    border-radius: 10px
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #1d3970;
+}
+
+
+:root {
+    margin: 0px;
+}
+
+.App {
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    z-index: 81;
+
+    width: 540px;
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+    border-radius: 10px;
+}
+
+.App .head-container {
+    background-color: #14274E;
+    padding: 19px 50px 19px 50px;
+    display: flex;
+    align-items: center;
+    border-radius: 10px 10px 0px 0px;
+}
+
+.App .head-container .head-log-wrapper {
+    display: flex;
+}
+
+.App .head-container .head-log-wrapper .head-icon {
+    margin-right: 15.72px;
+}
+
+.App .head-container .head-log-wrapper .head-content {
+    position: relative;
+    margin-top: 5px;
+}
+
+.App .head-container .head-log-wrapper .head-content p {
+    margin: 0px;
+    position: absolute;
+    bottom: -1px;
+    color: white;
+    font-weight: 500;
+    letter-spacing: 0.755px;
+    font-size: 16px;
+    margin-left: 18px;
+}
+
+.App .head-container .head-close-wrapper {
+    margin-left: auto;
+    display: flex;
+    cursor: pointer;
+}
+
+.App .head-container .head-close-wrapper p {
+    margin: 0px;
+    color: #EF9E00;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 500;
+}
+
+.App .head-container .head-close-wrapper span {
+    display: flex;
+    align-items: center;
+}
+
+.App .chatui-container {
+    background-image: url('/static/bgs/bg.png');
+    background-size: cover;
+    background-repeat: no-repeat;
+
+    padding-top: 20px;
+    padding-left: 35px;
+    padding-right: 35px;
+    overflow-y: scroll;
+    /* Define the animation for scrolling down */
+    scroll-behavior: smooth;
+}
+
+.App .chatui-container .user-msg {
+    max-width: 360px;
+    margin-left: auto;
+    border: 2px solid #EF9E00;
+    padding: 10px 10px 10px 10px;
+    border-radius: 15px 0px 15px 15px;
+    background: #FCF4E5;
+    word-wrap: break-word;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    margin-bottom: 40px;
+}
+
+.App .chatui-container .bot-msg {
+    display: flex;
+}
+
+.App .chatui-container .bot-avatar-box span {
+    background-color: #14274E;
+    width: 55px;
+    height: 55px;
+    border-radius: 55px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 10px;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
+.App .chatui-container .bot-msg .bot-content-box {
+    max-width: 360px;
+    /* width: 100%; */
+    margin-left: 20px;
+    padding: 10px 15px 10px 15px;
+    border-radius: 0px 15px 15px 15px;
+    border: 2px solid var(--surface-surface-invert, #14274E);
+    background: #E7E8EC;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    margin-bottom: 40px;
+}
+
+.App .chatui-container .bot-msg .bot-content-box p {
+    margin: 0 0 0em;
+<!-- /* min-height: 48px; */
+-->
+}
+
+.App .search-container {
+    padding: 15px 15px 15px 15px;
+    display: flex;
+    background-color: #ffffff;
+    align-items: center;
+    border-radius: 0px 0px 10px 10px;
+    border-bottom: 1px solid rgba(57, 72, 103, 0.1);
+    border-left: 1px solid rgba(57, 72, 103, 0.1);
+    border-right: 1px solid rgba(57, 72, 103, 0.1);
+}
+
+.App .search-container .search-input {
+    width: 100%;
+    padding: 15px 20px 15px 20px;
+    font-size: 16px;
+    border: 2px solid #000308;
+    border-radius: 10px 0px 0px 10px;
+    border-right: none;
+    outline: none;
+}
+
+.App .search-container .submit-btn {
+    cursor: pointer;
+}
+
+.App .search-container .submit-btn span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #14274E;
+    padding: 11px;
+    border-radius: 0px 10px 10px 0px;
+}
+
+
+.sticky-chat-icon {
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    width: 80px;
+    height: 80px;
+    text-align: center;
+    cursor: pointer;
+    z-index: 80;
+}
+
+
+.chat-wrapper {
+    height: 80px;
+    width: 80px;
+    background-color: #14274e;
+    border-radius: 50% 50% 50% 0;
+    border: 2px solid #ef9e00;
+    display: flex; /* Включить flex-контейнер */
+    justify-content: center; /* Выравнивание по горизонтали по центру */
+    align-items: center;
+}
+
+.bot-avatar {
+    fill: white;
+    width: 40px;
+    height: 40px;
+}
+
+.sticky-chat-icon:hover .bot-avatar {
+    fill: #ef9e00; /* Цвет при наведении (оранжевый) */
+    width: 45px; /* Размер при наведении (45x45 пикселей) */
+    height: 45px;
+}
+
+
+.ball {
+    background-color: #394867;
+    width: 8px;
+    height: 8px;
+    margin: 2px;
+    border-radius: 100%;
+    display: inline-block;
+    animation: bounce 0.5s ease-in-out infinite;
+}
+
+.ball1 {
+    animation-delay: 0.1s;
+    animation-direction: alternate; /* Для движения вверх и вниз */
+}
+
+.ball2 {
+    animation-delay: 0.2s;
+    animation-direction: alternate;
+}
+
+.ball3 {
+    animation-delay: 0.3s;
+    animation-direction: alternate;
+}
+
+@keyframes bounce {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-7px); /* Для дерганного движения */
+    }
+}
+
+/* new loading state */
+.loading-text {
+    min-height: 48px;
+}
+
+.loading-text p {
+    opacity: 0;
+}
+
+@keyframes fade-in-out {
+    0% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes fade-in-out-2 {
+    0% {
+        opacity: 0;
+    }
+    55% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+/* end of new loading state */
+
+
+.gpt-send-button {
+    background-color: #14274E;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    border-radius: 10px;
+    border: 2px solid #14274E;
+    align-items: center;
+    cursor: pointer;
+}
+
+.gpt-send-button span {
+    color: #FCFDFF;
+    text-align: center;
+    font-size: 20px;
+    padding: 10px 8px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    letter-spacing: -0.4px;
+}
+
+.send-button-blocked {
+    background-color: #14274ed8;
+    border: 2px solid #14274ed8 !important;
+    pointer-events: none;
+    cursor: default;
+}
+
+.gpt-form {
+    /* max-width: var(--reading-width, 48em); */
+    margin-right: auto;
+    margin-left: auto;
+    margin-bottom: 40px;
+}
+
+.gpt-input {
+    height: 46px;
+    width: 100%;
+    margin: 10px 0;
+    display: flex;
+    box-sizing: border-box;
+    padding: 2px 20px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    flex: 1 0 0;
+    border-radius: 10px;
+    border: 2px solid #14274E;
+    background-color: #ffffff;
+    color: rgb(42, 43, 42);
+    font-size: 14px;
+    line-height: 1.2em;
+}
+
+.gpt-input::placeholder {
+    color: rgba(42, 43, 42, 0.808);
+}
+
+.gpt-input.invalid {
+    border: 2px solid rgb(219, 0, 0);
+}
+
+
+.error-message {
+    color: rgb(219, 0, 0);
+    font-size: 14px;
+    margin-top: 5px;
+    display: none;
+}
+
+.gpt-textarea {
+    height: auto;
+    resize: vertical;
+    padding-top: 20px;
+    font-size: 14px;
+}
+
+.gpt-textarea::placeholder {
+    color: rgba(42, 43, 42, 0.808);
+}
+
+.custom_bot_initial_question {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    max-width: 335px;
+    margin-left: 20px;
+    margin-top: -2.7rem;
+    margin-bottom: 40px;
+}
+
+.custom_bot_initial_question p {
+    padding: 5px 12px;
+    font-size: 12px;
+    background: #fff;
+    border: 2px solid #14274E;
+    border-radius: 50px;
+    margin: 0;
+    transition: 0.3s ease;
+    cursor: pointer;
+    font-style: italic;
+}
+
+.custom_bot_initial_question p:hover {
+    background: #14274E;
+    color: #fff;
+}
+
+@media (max-width: 767px) {
+    .App {
+        width: 100%;
+        height: 100vh;
+        left: 0;
+        bottom: 0;
+        display: none;
+        position: fixed;
+        z-index: 81;
+        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+        border-radius: 10px;
+        /* Дополнительные стили для .app на маленьких экранах */
+    }
+
+    .chat-section {
+        height: 100vh;
+    }
+
+    .App .chatui-container {
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+
+    .App .chatui-container .user-msg {
+        padding: 15px 20px;
+        margin-bottom: 20px;
+    }
+
+    .App .chatui-container .bot-msg .bot-content-box {
+        padding: 5px 20px 5px 20px;
+        margin-bottom: 20px;
+    }
+
+    .custom_bot_initial_question {
+        margin-top: 0;
+    }
+
+    #chatui-container {
+        height: calc(100vh - 95px - 93px);
+    }
+}
+
+
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    visibility: hidden;
+    z-index: 999;
+}
+
+.overlay h1 {
+    margin: 0;
+    font-size: 2em;
+}
+
+
+.report-loader {
+    position: absolute;
+    top: calc(50% - 45px);
+    left: calc(50% - 45px);
+    width: 90px;
+    height: 90px;
+    border-radius: 50%;
+    perspective: 800px;
+}
+
+.report-inner {
+    position: absolute;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+}
+
+.report-inner.report-one {
+    left: 0;
+    top: 0;
+    animation: rotate-one 1s linear infinite;
+    border-bottom: 3px solid #d52121;
+}
+
+.report-inner.report-two {
+    right: 0%;
+    top: 0%;
+    animation: rotate-two 1s linear infinite;
+    border-right: 3px solid #d52121;
+}
+
+.report-inner.report-three {
+    right: 0%;
+    bottom: 0%;
+    animation: rotate-three 1s linear infinite;
+    border-top: 3px solid #d52121;
+}
+
+@keyframes rotate-one {
+    0% {
+        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+    }
+    100% {
+        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+    }
+}
+
+@keyframes rotate-two {
+    0% {
+        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+    }
+    100% {
+        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+    }
+}
+
+@keyframes rotate-three {
+    0% {
+        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+    }
+    100% {
+        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+    }
+}
+
+#message {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: #b3ff00;
+    padding: 10px;
+    z-index: 100;
+}
+
+.message h5{
+    margin-bottom: 0;
+}

static/js/audio-processor.js

@@ -0,0 +1,41 @@
+class SilenceDetectorProcessor extends AudioWorkletProcessor {
+    static get parameterDescriptors() {
+        return [{name: 'threshold', defaultValue: 0.01}];
+    }
+
+    constructor() {
+        super();
+        this.silenceStart = 0;
+        this.SILENCE_DELAY = 1.5;
+    }
+
+    process(inputs, outputs, parameters) {
+        const input = inputs[0];
+        const threshold = parameters.threshold[0];
+
+        if (input.length > 0) {
+            const inputChannelData = input[0];
+            let sum = 0;
+            for (let i = 0; i < inputChannelData.length; i++) {
+                sum += inputChannelData[i] * inputChannelData[i];
+            }
+            let volume = Math.sqrt(sum / inputChannelData.length);
+
+            if (this.silenceStart === 0) this.silenceStart = currentTime;
+
+            if (volume < threshold) {
+                if (currentTime - this.silenceStart > this.SILENCE_DELAY) {
+                    this.port.postMessage({type: 'silence', silenceDuration: currentTime - this.silenceStart});
+                    this.silenceStart = currentTime;
+                }
+            } else {
+                this.silenceStart = currentTime;
+                this.port.postMessage({type: 'sound'});
+            }
+        }
+
+        return true;
+    }
+}
+
+registerProcessor('silence-detector-processor', SilenceDetectorProcessor);

static/js/voice.js

@@ -0,0 +1,63 @@
+async function startCall() {
+    const uuid = generateUUID()
+    const socket = new WebSocket(`ws://127.0.0.1:8000/ws/${uuid}`)
+
+    socket.onopen = () => {
+        startRecording()
+    }
+
+    socket.onclose = event => console.log('WebSocket disconnected', event)
+    socket.onerror = error => alert('Something was wrong. Try again later.')
+    socket.onmessage = event => playResponse(event.data)
+
+    const audioContext = new AudioContext()
+    await audioContext.audioWorklet.addModule('volume-meter-processor.js')
+    const node = new AudioWorkletNode(audioContext, 'volume-meter-processor')
+
+    navigator.mediaDevices.getUserMedia({audio: true}).then(stream => {
+        const source = audioContext.createMediaStreamSource(stream)
+        source.connect(node)
+        node.connect(audioContext.destination) // для отладки
+    })
+
+    node.port.onmessage = event => {
+        const audioData = event.data // предположим, что это уже Blob или MediaStream
+        const reader = new FileReader()
+        reader.readAsDataURL(audioData)
+        reader.onloadend = () => {
+            const base64Audio = reader.result.split(',')[1]
+            socket.send(JSON.stringify({audio: base64Audio}))
+        }
+    }
+}
+
+async function startRecording() {
+    try {
+        if (!window.audioContext) {
+            window.audioContext = new AudioContext()
+            await window.audioContext.audioWorklet.addModule('volume-meter-processor.js')
+            window.audioNode = new AudioWorkletNode(window.audioContext, 'volume-meter-processor')
+
+            window.audioNode.port.onmessage = event => {
+                const audioData = event.data
+                const blob = new Blob(audioData, { type: 'audio/webm' })
+                const reader = new FileReader()
+                reader.readAsDataURL(blob)
+                reader.onloadend = () => {
+                    const base64Audio = reader.result.split(',')[1]
+                    socket.send(JSON.stringify({ audio: base64Audio }))
+                }
+            }
+        }
+
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+        const source = window.audioContext.createMediaStreamSource(stream)
+        source.connect(window.audioNode)
+        window.audioNode.connect(window.audioContext.destination)
+
+        console.log("Recording started")
+    } catch (error) {
+        console.error("Error accessing microphone:", error)
+        alert("Cannot access microphone. Please check permissions.")
+    }
+}

static/js/ws.js

@@ -0,0 +1,176 @@
+const messageHistory = document.getElementById('chatHistory')
+let stream;
+let ws
+let silenceDetectorNode;
+let silenceCount = 0
+let recording = false;
+let mediaRecorder;
+let continuousRecorder
+let audioContext;
+let source;
+let currentAudioChunks = [];
+let allAudioChunks = [];
+const uuid = generateUUID()
+const startRecordingButton = document.getElementById('startRecording')
+const loadingModal = document.getElementById('loadingModal');
+function makeLoading() {
+    loadingModal.style.visibility = 'visible';
+}
+
+function stopLoading() {
+    loadingModal.style.visibility = 'hidden';
+}
+
+function showMessage(message_text) {
+    const message = document.getElementById('message');
+    message.innerText = message_text
+    message.style.display = 'block';
+
+    setTimeout(function () {
+        message.style.display = 'none';
+    }, 2000);
+}
+
+function createMessage(type, message) {
+    const newMessage = document.createElement('div')
+    newMessage.className = 'message rounded-4 bg-white mb-4 mx-4 py-2 px-3 border'
+    newMessage.innerHTML = `
+    <h5>${type}</h5>
+    ${message}
+    `
+    messageHistory.appendChild(newMessage)
+}
+function playResponse(data) {
+    const response = JSON.parse(data)
+    createMessage('User', response['user_query'])
+    stopLoading()
+    console.log(response)
+    const audioSrc = `data:audio/mp3;base64,${response['voice_response']}`;
+    const audio = new Audio(audioSrc)
+    audio.play()
+    audio.onended = () => {
+        recording = true
+        createMessage('Liza', response['ai_response'])
+        showMessage('You can speak!')
+        startMediaRecorder()
+    }
+}
+
+startRecordingButton.addEventListener('click', async () => {
+    if (!recording) {
+        if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+            mediaRecorder.stop();
+        }
+        ws = new WebSocket(`ws://localhost:8000/ws/${uuid}`);
+        ws.onclose = (event) => {
+            if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+                mediaRecorder.stop();
+            }
+        }
+        ws.onerror = (error) => {
+            alert('Something was wrong. Try again later.')
+            console.log(error)
+            window.location.reload()
+        };
+        ws.onmessage = (event) => {
+            const response = event.data
+            playResponse(response)
+        }
+
+        startRecordingButton.innerHTML = 'Stop call';
+        try {
+            stream = await navigator.mediaDevices.getUserMedia({audio: true, video: false});
+            audioContext = new AudioContext();
+            await audioContext.audioWorklet.addModule('../../../static/js/audio-processor.js');
+            silenceDetectorNode = new AudioWorkletNode(audioContext, 'silence-detector-processor');
+            silenceDetectorNode.port.onmessage = (event) => {
+                if (event.data.type === 'silence') {
+                    if (currentAudioChunks.length > 0) {
+                        if (silenceCount === 0) {
+                            silenceCount += 1;
+                            stopRecorder();
+                        }
+                    }
+                } else if (event.data.type === 'sound') {
+                    silenceCount = 0;
+                }
+            };
+            source = audioContext.createMediaStreamSource(stream);
+            mediaRecorder = new MediaRecorder(stream);
+            mediaRecorder.start(1000);
+            mediaRecorder.ondataavailable = event => {
+                currentAudioChunks.push(event.data);
+            };
+            source.connect(silenceDetectorNode).connect(audioContext.destination);
+            continuousRecorder = new MediaRecorder(stream);
+            continuousRecorder.start();
+            continuousRecorder.ondataavailable = event => {
+                allAudioChunks.push(event.data);
+            };
+            recording = true;
+        } catch (error) {
+            console.error('Access to microphone denied:', error);
+        }
+    } else {
+        await stopRecording();
+    }
+});
+
+async function stopRecording() {
+    // startRecordingButton.innerHTML = 'Start recording';
+    // recording = false;
+    // mediaRecorder.stop();
+    // continuousRecorder.stop();
+    // silenceDetectorNode.disconnect();
+    // source.disconnect();
+    // audioContext.close();
+    // currentAudioChunks = [];
+    window.location.reload()
+}
+
+function sendAudioToServer(audioBlob) {
+    return new Promise((resolve, reject) => {
+        console.log("Sending audio to server...", audioBlob);
+        const reader = new FileReader();
+        reader.readAsDataURL(audioBlob);
+        reader.onloadend = () => {
+            let base64String = reader.result;
+            base64String = base64String.split(',')[1];
+            const dataWS = {'audio': base64String};
+            ws.send(JSON.stringify(dataWS));
+            makeLoading()
+            resolve();
+        };
+        reader.onerror = reject;
+    });
+}
+
+
+async function stopRecorder() {
+    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+        mediaRecorder.stop();
+    }
+    await sendAudioToServer(new Blob(currentAudioChunks, {type: 'audio/wav'}));
+    currentAudioChunks = [];
+}
+
+async function startMediaRecorder() {
+    mediaRecorder = new MediaRecorder(stream);
+    mediaRecorder.start(1000);
+    mediaRecorder.ondataavailable = event => {
+        currentAudioChunks.push(event.data);
+    }
+}
+
+function generateUUID() {
+    const arr = new Uint8Array(16)
+    window.crypto.getRandomValues(arr)
+
+    arr[6] = (arr[6] & 0x0f) | 0x40
+    arr[8] = (arr[8] & 0x3f) | 0x80
+
+    return ([...arr].map((b, i) =>
+        (i === 4 || i === 6 || i === 8 || i === 10 ? "-" : "") + b.toString(16).padStart(2, "0")
+    ).join(""))
+}
+