LMC2700-ChatBot-Group-1/DraculaBot

1import gradio as gr2from huggingface_hub import InferenceClient3 4# SETS UP CLIENT INTERFACE API5client = InferenceClient()6 7# SVG VAMPIRE ANIMATION CODE8VAMPIRE_SVG = '''9<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" style="width: 300px; height: 300px;">10  <defs>11    <style>12      @keyframes eyeGlow {13        0%, 100% { filter: drop-shadow(0 0 2px #ff3300); }14        50% { filter: drop-shadow(0 0 4px #ff3300); }15      }16      @keyframes floating {17        0%, 100% { transform: translateY(0) rotate(-2deg); }18        50% { transform: translateY(-5px) rotate(2deg); }19      }20      @keyframes capeWave {21        0%, 100% { transform: skewX(0deg); }22        50% { transform: skewX(-5deg); }23      }24      @keyframes angryShake {25        0%, 100% { transform: translateX(0); }26        25% { transform: translateX(-2px); }27        75% { transform: translateX(2px); }28      }29      @keyframes batFly1 {30        0% { transform: translate(0, 0) scale(1); }31        25% { transform: translate(-100px, -50px) scale(0.8); }32        50% { transform: translate(-200px, 0) scale(0.6); }33        75% { transform: translate(-300px, -30px) scale(0.4); }34        100% { transform: translate(-400px, 0) scale(0.2); }35      }36      @keyframes batFly2 {37        0% { transform: translate(400px, 0) scale(0.2); }38        25% { transform: translate(300px, -40px) scale(0.4); }39        50% { transform: translate(200px, 0) scale(0.6); }40        75% { transform: translate(100px, -20px) scale(0.8); }41        100% { transform: translate(0, 0) scale(1); }42      }43      @keyframes batFly3 {44        0% { transform: translate(0, 400px) scale(0.2); }45        25% { transform: translate(-30px, 300px) scale(0.4); }46        50% { transform: translate(0, 200px) scale(0.6); }47        75% { transform: translate(-20px, 100px) scale(0.8); }48        100% { transform: translate(0, 0) scale(1); }49      }50    </style>51 52    <!-- Bat symbol definition -->53    <symbol id="bat" viewBox="0 0 40 20">54      <path d="M20 15 L25 5 L30 0 L35 5 L30 10 L20 15 L10 10 L5 5 L10 0 L15 5 Z" fill="#000000"/>55      <path d="M18 15 L22 15 L20 18 Z" fill="#000000"/>56    </symbol>57  </defs>58 59  <!-- Background bats -->60  <g opacity="0.6">61    <!-- Flying bat group 1 -->62    <g style="animation: batFly1 8s linear infinite">63      <use href="#bat" x="350" y="50" width="40" height="20"/>64    </g>65    <!-- Flying bat group 2 -->66    <g style="animation: batFly2 12s linear infinite">67      <use href="#bat" x="50" y="100" width="30" height="15"/>68    </g>69    <!-- Flying bat group 3 -->70    <g style="animation: batFly3 10s linear infinite">71      <use href="#bat" x="200" y="30" width="35" height="17.5"/>72    </g>73    <!-- Additional bats with different timings -->74    <g style="animation: batFly1 15s linear infinite -4s">75      <use href="#bat" x="300" y="150" width="25" height="12.5"/>76    </g>77    <g style="animation: batFly2 10s linear infinite -6s">78      <use href="#bat" x="100" y="80" width="35" height="17.5"/>79    </g>80  </g>81 82  <!-- Dramatic cape background -->83  <g style="animation: capeWave 3s ease-in-out infinite">84    <path d="M100 150 Q 200 180 300 150 L 350 400 L 50 400 Z" fill="#880000"/>85    <path d="M120 150 Q 200 170 280 150 L 320 400 L 80 400 Z" fill="#aa0000"/>86  </g>87 88  <!-- Main character group -->89  <g style="animation: floating 4s ease-in-out infinite">90    <!-- Suit -->91    <rect x="165" y="140" width="70" height="90" rx="5" fill="#111111"/>92    <rect x="180" y="140" width="40" height="70" fill="#ffffff"/>93    <path d="M185 150 Q 200 145 215 150 Q 200 155 185 150" fill="#cc0000"/>94 95    <!-- Face -->96    <path d="M160 130 C 160 70, 240 70, 240 130 Q 200 160 160 130" fill="#ffe6e6"/>97 98    <!-- Angry pointed ears -->99    <path d="M160 110 Q 150 95 165 105" fill="#ffe6e6"/>100    <path d="M240 110 Q 250 95 235 105" fill="#ffe6e6"/>101 102    <!-- Spiky angry hair -->103    <g style="animation: angryShake 0.5s ease-in-out infinite">104      <path d="M155 120 C 150 60, 250 60, 245 120" fill="#111111"/>105      <path d="M165 85 Q 175 60 185 85" fill="#111111"/>106      <path d="M185 80 Q 200 50 215 80" fill="#111111"/>107      <path d="M215 85 Q 225 60 235 85" fill="#111111"/>108    </g>109 110    <!-- Angry eyes -->111    <g style="animation: eyeGlow 1s ease-in-out infinite">112      <path d="M165 105 Q 180 95 195 105 Q 180 115 165 105" fill="#ffffff"/>113      <path d="M205 105 Q 220 95 235 105 Q 220 115 205 105" fill="#ffffff"/>114      <circle cx="180" cy="105" r="8" fill="#ff3300"/>115      <circle cx="220" cy="105" r="8" fill="#ff3300"/>116      <circle cx="180" cy="105" r="4" fill="#000000"/>117      <circle cx="220" cy="105" r="4" fill="#000000"/>118    </g>119 120    <!-- Angry eyebrows -->121    <g style="animation: angryShake 0.5s ease-in-out infinite">122      <path d="M165 95 Q 180 85 195 95" stroke="#111111" stroke-width="3" fill="none"/>123      <path d="M205 95 Q 220 85 235 95" stroke="#111111" stroke-width="3" fill="none"/>124    </g>125 126    <!-- Angry mouth with fangs -->127    <path d="M185 125 Q 200 120 215 125" fill="none" stroke="#111111" stroke-width="2"/>128    <path d="M190 125 L 195 133 L 200 125" fill="#ffffff"/>129    <path d="M200 125 L 205 133 L 210 125" fill="#ffffff"/>130  </g>131</svg>132'''133 134# CSS CODE FOR PAGE FORMAT135CSS_CODE = '''136body { 137    background-color: black; 138    background-image: url("https://cdn-lfs-us-1.hf.co/repos/a0/07/a007bba5c9653bf1095ea160af5a759fb61317b65bfe49e88620d0bba2b69850/9dfdaefaae989cacd7f5c2784fd275a66570aecb36df5ef6251cb7b257055fef?response-content-disposition=inline%3B+filename*%3DUTF-8%27%27CastleBackground.jpg%3B+filename%3D%22CastleBackground.jpg%22%3B&response-content-type=image%2Fjpeg&Expires=1730070063&Policy=eyJTdGF0ZW1lbnQiOlt7IkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTczMDA3MDA2M319LCJSZXNvdXJjZSI6Imh0dHBzOi8vY2RuLWxmcy11cy0xLmhmLmNvL3JlcG9zL2EwLzA3L2EwMDdiYmE1Yzk2NTNiZjEwOTVlYTE2MGFmNWE3NTlmYjYxMzE3YjY1YmZlNDllODg2MjBkMGJiYTJiNjk4NTAvOWRmZGFlZmFhZTk4OWNhY2Q3ZjVjMjc4NGZkMjc1YTY2NTcwYWVjYjM2ZGY1ZWY2MjUxY2I3YjI1NzA1NWZlZj9yZXNwb25zZS1jb250ZW50LWRpc3Bvc2l0aW9uPSomcmVzcG9uc2UtY29udGVudC10eXBlPSoifV19&Signature=EAVuGglXsBUEO3zPGIlNYAhbpnD89Y7LDZ6wbtURENSvpv-HD8SFeTgLJwhy53XzfKBk7pKD3doAbgpp4sjLQ5f5go5pz2sD6MGuiQopnMep%7E4jWlLbIWZ07IY7ajqZFQDNfASW1JULyl1xypSLf2LIoc9DqsZDW749C6-WYsBttvDn2PGc4H3mmT98wm7jjj1-YTQZPKKElq0XCK--aNcHvTzV%7Eh6T1v%7EUYDBvCIUgwAcyfDU70cM%7EnNWoLFvR07o37nL9D1i0j4rzlj5ypEEhqyXfogl%7E%7ENbQfLY3rkxCtWrOoWkgNuM4-cx8wDXUJ3AMlAdjb9bhVZYfejgzrcQ__&Key-Pair-Id=K24J24Z295AEI9");139    background-repeat: no-repeat;140    background-position: center;141    background-position-y: -100px;142}143.vampire-container {144    width: 400px;  /* Increased from 300px */145    position: sticky;146    top: 20px;147    align-self: flex-start;148    display: flex;149    flex-direction: column;150    align-items: center;151}152.main-content {153    display: flex;154    justify-content: center;155    width: 100%;156    margin: 0;157    gap: 30px;  /* Increased gap between chat and vampire */158}159.title {160    color: #cc0000;161    font-size: 5rem;162    font-family: "Gothic", serif;163    text-align: center;164    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);165}166.subtitle {167    color: #cc0000;168    font-size: 1.5rem;169    font-family: "Gothic", serif;170    text-align: center;171    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);172    margin-bottom: 20px;173}174.vampire-svg {175    background: rgba(0, 0, 0, 0.6);176    padding: 30px;  /* Increased padding */177    border-radius: 15px;  /* Slightly larger radius */178    box-shadow: 0 0 30px rgba(204, 0, 0, 0.3);  /* Larger shadow */179}180'''181 182# SYSTEM MESSAGE USED TO GIVE BOT PERSONALITY183FIRST_SYSTEM_MESSAGE = '''184    You are Count Dracula, the legendary vampire. 185    Speak in an elegant, sophisticated manner with occasional dark humor.186    Occasionally mention your thirst for blood in a playful manner.187    In words that begin with the letter "w", replace the letter "w" with a "v".188    Occasionally end sentences with "Bleh."189    Keep your responses short, a paragraph at most.190'''191 192# FUNCTION FOR CALLING HUGGINGFACEH4 API AND GETTING RESPONSES193def respond(prompt: str, history):194    if not history:195        history = [{"role": "system", "content": FIRST_SYSTEM_MESSAGE}]196    197    history.append({"role": "user", "content": prompt})198    yield history199    200    response = {"role": "assistant", "content": ""}201    202    for message in client.chat_completion(203        history,204        temperature=0.75,205        top_p=0.9,206        max_tokens=512,207        stream=True,208        model="HuggingFaceH4/zephyr-7b-beta"209    ):210        response["content"] += message.choices[0].delta.content or ""211        yield history + [response]212 213# GENERATES PAGE FOR BOT214with gr.Blocks(css=CSS_CODE) as demo:215    with gr.Column(elem_classes="main-content"):216        #PAGE TITLE217        gr.HTML('''218            <h1 class="title">DRACULABOT</h1>219            <h2 class="subtitle">A Dracula Themed AI ChatBot</h2>220        ''')221        # MAIN CONTENT222        with gr.Row():223            # COLUMN FOR CHATBOT SECTION224            with gr.Group():225                chatbot = gr.Chatbot(226                    height=600,227                    label="Dracula",228                    type="messages"229                )230                prompt = gr.Textbox(231                    max_lines=1,232                    label="Chat Message",233                    placeholder="Ask your question, Mortal"234                )235                prompt.submit(respond, [prompt, chatbot], [chatbot])236                prompt.submit(lambda: "", None, [prompt])237            238            # COLUMN FOR DRACULA AVATAR239            gr.HTML(f'''240                <div class="vampire-container">241                    <div class="vampire-svg">242                        {VAMPIRE_SVG}243                    </div>244                </div>245            ''')246 247# LAUNCHES PAGE248if __name__ == "__main__":249    demo.launch()