DEV Community

Cover image for Chat bots
Hãndsõme Hacker
Hãndsõme Hacker

Posted on

Chat bots

#bots

Hello World 😊
How can I create A professional chat bot with a good UI

python #Javascript

Top comments (2)

Collapse
 
cmuralisree profile image
Chittoji Murali Sree Krishna •

if you want chatbots to work like google or siri you have to use some Api's

else

python

Chat bot with python, you have do it with flutter or tkinter for making a frontend, and for the rest you can take input with text or speech, I used a speech Variant without any front end

import os
import time
import playsound
import speech_recognition as sr
from gtts import gTTS


def speak(text):
    tts = gTTS(text=text, lang="en")
    filename = "voice.mp3"
    tts.save(filename)
    playsound.playsound(filename)


def get_audio():
    r = sr.Recognizer()
    with sr.Microphone() as source:
        audio = r.listen(source)
        said = ""
        try:
            said = r.recognize_google(audio)
            print(said)
        except Exception as e:
            print("Exception: " + str(e))
    return said


text = get_audio()
if "hello" in text:
    speak("hello, hey there wassup")

if "what is my name" in text:
    speak("your name is warlord")

if "what is your name" in text:
    speak("my name is Luciale")

if "good morning" in text:
    speak("a very good morning to you")

if "good night" in text:
    speak("good night, scary dreams")
Enter fullscreen mode Exit fullscreen mode

Like this you have to include for every bit of words.
But for text input

Chat = input('your text here');

If "hi" in Chat:
     Print('hello how are you');
# you can keep continue like this
Enter fullscreen mode Exit fullscreen mode

There might be better options than this, I am just giving this as a reference.

javascript

Here you have to get inputs from the html forms and can write the logic

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
    .gsearch{
    display:none;
    }
    </style>
  </head>
  <body class="back">
    <button class="talk">Talk</button>
    <h3 class="content"></h3>
    <div class="gsearch">
    <form action="https://www.google.com/search" method="get" target="_blank">
    <input type="text" name="q" placeholder="Google-Search" autocomplete/>
     <input type="submit" value="search">
    </form>
    </div>
    <script src="assistant.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
const btn = document.querySelector('.talk');
const content = document.querySelector('.content');
const body = document.querySelector('.back');
const ser = document.querySelector('.gsearch');

const SpeechRecognition =
  window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();

recognition.onstart = function () {
  console.log('voice is activated');
};

recognition.onresult = function(event) {
  const current = event.resultIndex;
    const transcript = event.results[current][0].transcript;
    content.textContent = transcript;
    readOutLoud(transcript)
};

btn.addEventListener('click', () => {
  recognition.start();
});

function readOutLoud(message){
    const speech = new SpeechSynthesisUtterance();
    speech.text = message;

    if(message.includes('hello')){
    const finalText ='Howdy, how can i help you?';
    speech.text = finalText;
    }
    else if(message.includes('my name')){
    speech.text = 'your name is Warlord';
    }
    else if(message.includes('dark mode')){
    speech.text = 'switching to dark mode';
    body.style.backgroundColor = 'black';
    body.style.color = 'green';
    }
    else if(message.includes('light mode')){
    speech.text = 'switching to light mode';
    body.style.backgroundColor = 'white';
    body.style.color = 'blue';
    }
    else if(message.includes('Google search')){
    ser.style.display = 'block';
    }
    speech.volume = 1;
    speech.rate = 1;
    speech.pitch = 1;

    window.speechSynthesis.speak(speech)
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
lawal12345 profile image
Hãndsõme Hacker •

Wow thanks 👍💖

Read next

ahmedraza_fyntune profile image

Php Reflection

Ahmedraza Fyntune -

mikeyoung44 profile image

LLM Test Generators Miss Critical Bugs Due to Design Flaws, Study Shows

Mike Young -

mikeyoung44 profile image

AI and the Black Box Problem: How Machine Learning Challenges Mathematical Proof Verification

Mike Young -

frorning profile image

Embedding vs. Referencing - A Strategic Choice!

Piyush Chauhan -