| from huggingface_hub import InferenceClient | |
| import gradio as gr | |
| client = InferenceClient("mistralai/Mixtral-8x7B-Instruct-v0.1") | |
| def format_prompt(message, history): | |
| prompt = "<s>" | |
| for user_prompt, bot_response in history: | |
| prompt += f"[INST] {user_prompt} [/INST]" | |
| prompt += f" {bot_response}</s> " | |
| prompt += f"[INST] {message} [/INST]" | |
| return prompt | |
| def generate( | |
| prompt, history, temperature=0.2, max_new_tokens=256, top_p=0.95, repetition_penalty=1.0, | |
| ): | |
| temperature = float(temperature) | |
| if temperature < 1e-2: | |
| temperature = 1e-2 | |
| top_p = float(top_p) | |
| generate_kwargs = dict( | |
| temperature=temperature, | |
| max_new_tokens=max_new_tokens, | |
| top_p=top_p, | |
| repetition_penalty=repetition_penalty, | |
| do_sample=True, | |
| seed=42, | |
| ) | |
| formatted_prompt = format_prompt(prompt, history) | |
| stream = client.text_generation(formatted_prompt, **generate_kwargs, stream=True, details=True, return_full_text=False) | |
| output = "" | |
| for response in stream: | |
| output += response.token.text | |
| yield output | |
| return output | |
| custom_html = "<div class="message-row bubble bot-row svelte-12dsd9j"> | |
| <div class="avatar-container svelte-12dsd9j"> | |
| <img class="avatar-image svelte-12dsd9j" src="https://doctorvivin-mixtral-chat.hf.space/--replicas/gyo76/file=/tmp/gradio/199af69ab60420a790b49edd574dbab1da62ed0a/botm.png" alt="bot avatar"></div> | |
| <div class="message bot svelte-12dsd9j message-fit message-bubble-border" style="text-align: right;"> | |
| <button data-testid="bot" dir="ltr" aria-label="bot's message:' Hello! How can I help you today? If you have any questions or need assistance with something, feel free to ask. I'm here to provide information and support.</s>" class="svelte-12dsd9j latest" style="user-select: text; text-align: left;"> | |
| <span class="md svelte-r3x3aw chatbot"><p>Hello! How can I help you today? If you have any questions or need assistance with something, feel free to ask. I'm here to provide information and support.</p> | |
| </span></button></div><div class="message-buttons-bot message-buttons-bubble with-avatar svelte-12dsd9j message-buttons-fit bubble-buttons-user"><button aria-label="like" class="svelte-3snf3m"><svg xmlns="http://www.w3.org/2000/svg" width="15px" height="15px" viewBox="0 0 24 24" fill="none" stroke-width="1.5" color="currentColor"><path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" d="M16.472 20H4.1a.6.6 0 0 1-.6-.6V9.6a.6.6 0 0 1 .6-.6h2.768a2 2 0 0 0 1.715-.971l2.71-4.517a1.631 1.631 0 0 1 2.961 1.308l-1.022 3.408a.6.6 0 0 0 .574.772h4.575a2 2 0 0 1 1.93 2.526l-1.91 7A2 2 0 0 1 16.473 20Z"></path><path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M7 20V9"></path></svg></button> <button aria-label="dislike" class="svelte-3snf3m"><svg xmlns="http://www.w3.org/2000/svg" width="15px" height="15px" viewBox="0 0 24 24" fill="none" stroke-width="1.5" color="currentColor"><path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" d="M16.472 3.5H4.1a.6.6 0 0 0-.6.6v9.8a.6.6 0 0 0 .6.6h2.768a2 2 0 0 1 1.715.971l2.71 4.517a1.631 1.631 0 0 0 2.961-1.308l-1.022-3.408a.6.6 0 0 1 .574-.772h4.575a2 2 0 0 0 1.93-2.526l-1.91-7A2 2 0 0 0 16.473 3.5Z"></path><path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M7 14.5v-11"></path></svg></button> <button title="copy" aria-label="Copy message" class="svelte-11hlfrc"><svg xmlns="http://www.w3.org/2000/svg" width="15px" height="14px" viewBox="0 0 33 33" color="currentColor"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg> </button></div> | |
| </div>" | |
| mychatbot = gr.Chatbot( | |
| avatar_images=["./user.png", "./botm.png"], bubble_full_width=False, show_label=False, show_copy_button=True, likeable=True,) | |
| demo = gr.ChatInterface(fn=generate, | |
| chatbot=mychatbot, | |
| title="SF's AI Chat", | |
| retry_btn=None, | |
| undo_btn=None, | |
| css="body { background-color: inherit; }" | |
| "#component-2 {display: none;}" | |
| ".gradio-container.gradio-container-4-8-0.svelte-1kyws56.app {max-width: 100% !important;}" | |
| "gradio-app {background: linear-gradient(134deg,#00425e 0%,#001a3f 43%,#421438 77%) !important; background-attachment: fixed !important; background-position: top;}" | |
| ".panel.svelte-vt1mxs {background: transparent;}" | |
| ".block.svelte-90oupt { background: transparent; border-color: transparent;}" | |
| ".bot.svelte-12dsd9j.svelte-12dsd9j.svelte-12dsd9j { background: #ffffff1a; border-color: transparent; color: white;}" | |
| ".user.svelte-12dsd9j.svelte-12dsd9j.svelte-12dsd9j { background: #ffffff1a; border-color: transparent; color: white; padding: 5px 13px;}" | |
| "div.svelte-iyf88w{ background: #cc98d445; border-color: transparent; border-radius: 25px;}" | |
| "textarea.scroll-hide.svelte-1f354aw { background: transparent;}" | |
| ".primary.svelte-cmf5ev { background: transparent; color: white;}" | |
| ".primary.svelte-cmf5ev:hover { background: transparent; color: white;}" | |
| "button#component-8 { display: flex; position: absolute; margin-top: 60px; border-radius: 25px;}" | |
| "button#component-10 { flex: none; margin-left: auto; border-radius: 25px;}" | |
| ".share-button.svelte-12dsd9j { display: none;}" | |
| "footer.svelte-mpyp5e { display: none !important;}" | |
| ) | |
| demo.queue().launch(show_api=False) |