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

sowndarya_sukumar_beb8e32 profile image

Parallel Programming with R: Speeding Up Your Analysis

Sowndarya sukumar -

nina_baghdasaryan_cfdee7e profile image

The Multiple Dimensions of Spuriousness in Machine Learning

Nina Baghdasaryan -

mint_ profile image

Mint Blockchain Secures an Additional 750K OP Delegation, Strengthening Its Core Role in Optimism Governance!

Mint -

cozy_wordpress profile image

WordPress 6.7: Elevating Your Site with Enhanced Themes and Plugins

Cozy Themes -