Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| from huggingface_hub import InferenceClient | |
| """ | |
| For more information on `huggingface_hub` Inference API support, please check the docs: https://huggingface.co/docs/huggingface_hub/v0.22.2/en/guides/inference | |
| """ | |
| client = InferenceClient("HuggingFaceH4/zephyr-7b-beta") | |
| python_code = """ | |
| def fib(n): | |
| if n <= 0: | |
| return 0 | |
| elif n == 1: | |
| return 1 | |
| else: | |
| return fib(n-1) + fib(n-2) | |
| """ | |
| js_code = """ | |
| function fib(n) { | |
| if (n <= 0) return 0; | |
| if (n === 1) return 1; | |
| return fib(n - 1) + fib(n - 2); | |
| } | |
| """ | |
| html = """ | |
| <html> | |
| <body> | |
| <h1>My First JavaScript</h1> | |
| <button type="testButton" onclick="testFn()"> Start </button> | |
| <p id="demo"></p> | |
| </body> | |
| </html> | |
| """ | |
| scripts = """ | |
| async () => { | |
| // set testFn() function on globalThis, so you html onlclick can access it | |
| // const d3 = await import("https://cdn.jsdelivr.net/npm/d3@7/+esm"); | |
| // globalThis.d3 = d3; | |
| // or | |
| const script = document.createElement("script"); | |
| script.onload = () => console.log("d3 loaded") ; | |
| script.src = "https://cdn.jsdelivr.net/npm/d3@7"; | |
| document.head.appendChild(script) | |
| globalThis.testFn = () => { | |
| document.getElementById('demo').innerHTML = "Hello" | |
| } | |
| } | |
| """ | |
| init_js = """ | |
| function createGradioAnimation() { | |
| var container = document.createElement('div'); | |
| container.id = 'gradio-animation'; | |
| container.style.fontSize = '2em'; | |
| container.style.fontWeight = 'bold'; | |
| container.style.textAlign = 'center'; | |
| container.style.marginBottom = '20px'; | |
| var text = 'Welcome to Gradio!'; | |
| for (var i = 0; i < text.length; i++) { | |
| (function(i){ | |
| setTimeout(function(){ | |
| var letter = document.createElement('span'); | |
| letter.style.opacity = '0'; | |
| letter.style.transition = 'opacity 0.5s'; | |
| letter.innerText = text[i]; | |
| container.appendChild(letter); | |
| setTimeout(function() { | |
| letter.style.opacity = '1'; | |
| }, 50); | |
| }, i * 250); | |
| })(i); | |
| } | |
| var gradioContainer = document.querySelector('.gradio-container'); | |
| gradioContainer.insertBefore(container, gradioContainer.firstChild); | |
| return 'Animation created'; | |
| } | |
| """ | |
| def respond( | |
| message, | |
| history: list[tuple[str, str]], | |
| system_message, | |
| max_tokens, | |
| temperature, | |
| top_p, | |
| ): | |
| messages = [{"role": "system", "content": system_message}] | |
| for val in history: | |
| if val[0]: | |
| messages.append({"role": "user", "content": val[0]}) | |
| if val[1]: | |
| messages.append({"role": "assistant", "content": val[1]}) | |
| messages.append({"role": "user", "content": message}) | |
| response = "" | |
| for message in client.chat_completion( | |
| messages, | |
| max_tokens=max_tokens, | |
| stream=True, | |
| temperature=temperature, | |
| top_p=top_p, | |
| ): | |
| token = message.choices[0].delta.content | |
| response += token | |
| yield response, gr.Code(language="python", value=python_code) | |
| """ | |
| For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface | |
| """ | |
| with gr.Blocks(js=scripts) as demo: | |
| code = gr.Code(render=False) | |
| with gr.Row(): | |
| with gr.Column(): | |
| gr.Markdown("<center><h1>Change up Noodle Jump!</h1></center>") | |
| gr.ChatInterface( | |
| respond, | |
| additional_outputs=[code], | |
| additional_inputs=[ | |
| gr.Textbox(value="You are a sassy chatbot.", label="System message"), | |
| gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"), | |
| gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"), | |
| gr.Slider( | |
| minimum=0.1, | |
| maximum=1.0, | |
| value=0.95, | |
| step=0.05, | |
| label="Top-p (nucleus sampling)", | |
| ), | |
| ] | |
| ) | |
| with gr.Column(): | |
| gr.Markdown("<center><h1>Code</h1></center>") | |
| gr.FileExplorer() | |
| code.render() | |
| gr.HTML(html) | |
| if __name__ == "__main__": | |
| demo.launch() |