Use Hyperbolic API to call Qwen coder.

app.py

@@ -1,42 +1,36 @@
 import os
 import re
-from http import HTTPStatus
-from typing import Dict, List, Optional, Tuple
 import base64
+from typing import Dict, List, Optional, Tuple
 
-
-import dashscope
 import gradio as gr
-from dashscope import Generation
-from dashscope.api_entities.dashscope_response import Role
+
+import hyperbolic_gradio
 
 import modelscope_studio.components.base as ms
 import modelscope_studio.components.legacy as legacy
 import modelscope_studio.components.antd as antd
 from config import DEMO_LIST, SystemPrompt
 
-YOUR_API_TOKEN = os.getenv('YOUR_API_TOKEN')
-dashscope.api_key = YOUR_API_TOKEN
+YOUR_API_TOKEN = os.getenv('HYPERBOLIC_API_KEY')
 
 History = List[Tuple[str, str]]
 Messages = List[Dict[str, str]]
 
 def history_to_messages(history: History, system: str) -> Messages:
-    messages = [{'role': Role.SYSTEM, 'content': system}]
+    messages = [{'role': 'system', 'content': system}]
     for h in history:
-        messages.append({'role': Role.USER, 'content': h[0]})
-        messages.append({'role': Role.ASSISTANT, 'content': h[1]})
+        messages.append({'role': 'user', 'content': h[0]})
+        messages.append({'role': 'assistant', 'content': h[1]})
     return messages
 
-
-def messages_to_history(messages: Messages) -> Tuple[str, History]:
-    assert messages[0]['role'] == Role.SYSTEM
+def messages_to_history(messages: Messages) -> History:
+    assert messages[0]['role'] == 'system'
     history = []
     for q, r in zip(messages[1::2], messages[2::2]):
         history.append([q['content'], r['content']])
     return history
 
-
 def remove_code_block(text):
     pattern = r'```html\n(.+?)\n```'
     match = re.search(pattern, text, re.DOTALL)
@@ -55,29 +49,13 @@ def send_to_sandbox(code):
     encoded_html = base64.b64encode(code.encode('utf-8')).decode('utf-8')
     data_uri = f"data:text/html;charset=utf-8;base64,{encoded_html}"
     return f"<iframe src=\"{data_uri}\" width=\"100%\" height=\"920px\"></iframe>"
-    # return {
-    #     '/src/App.jsx': {
-    #         'code': code,
-    #         'fpath': '/src/App.jsx',
-    #     },
-    #     # 以路径为 key，必须以绝对路径来描述
-    #     '/src/index.js': {
-    #         'code':
-    #         'import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);',
-    #         'fpath': '/src/index.js',
-    #     },
-    #     '/package.json': {
-    #         'code': '{"name":"demo", "main": "./src/index.js", "dependencies":{ "react": "18.3.1", "react-dom": "18.3.1", "antd": "5.21.6", "styled-components": "6.1.13" }}',
-    #         'fpath': '/package.json',
-    #     },
-    # }
 
 def demo_card_click(e: gr.EventData):
     index = e._data['component']['index']
     return DEMO_LIST[index]['description']
 
 with gr.Blocks(css_paths="app.css") as demo:
-    history = gr.State([])
+    history_state = gr.State([])
     setting = gr.State({
         "system": SystemPrompt,
     })
@@ -88,23 +66,30 @@ with gr.Blocks(css_paths="app.css") as demo:
                 with antd.Col(span=24, md=8):
                     with antd.Flex(vertical=True, gap="middle", wrap=True):
                         header = gr.HTML("""
-                                  <div class="left_header">
-                                   <img src="//img.alicdn.com/imgextra/i2/O1CN01KDhOma1DUo8oa7OIU_!!6000000000220-1-tps-240-240.gif" width="200px" />
-                                   <h1>Qwen2.5-Coder</h2>
-                                  </div>
-                                   """)
+                            <div style="text-align: center;">
+                                <!-- Container for GIFs -->
+                                <div style="display: flex; justify-content: center; gap: 20px; margin-bottom: 20px;">
+                                    <!-- First GIF -->
+                                    <img src="https://raw.githubusercontent.com/HyperbolicLabs/hyperbolic-gradio/master/hyperbolic-animated.gif" width="200px" />
+                                    <!-- Second GIF -->
+                                    <img src="//img.alicdn.com/imgextra/i2/O1CN01KDhOma1DUo8oa7OIU_!!6000000000220-1-tps-240-240.gif" width="200px" />
+                                </div>
+                                <!-- Header Text -->
+                                <h1>Qwen2.5-Coder-32B with Hyperbolic API</h1>
+                            </div>
+                        """)
+
                         input = antd.InputTextarea(
                             size="large", allow_clear=True, placeholder="Please enter what kind of application you want")
-                        # input = gr.TextArea(placeholder="请输入您想要一个什么样的应用", show_label=False, container=False)
                         btn = antd.Button("send", type="primary", size="large")
                         clear_btn = antd.Button("clear history", type="default", size="large")
 
                         antd.Divider("examples")
                         with antd.Flex(gap="small", wrap=True):
                             with ms.Each(DEMO_LIST):
-                              with antd.Card(hoverable=True, as_item="card") as demoCard:
-                                antd.CardMeta()
-                              demoCard.click(demo_card_click, outputs=[input])
+                                with antd.Card(hoverable=True, as_item="card") as demoCard:
+                                    antd.CardMeta()
+                                demoCard.click(demo_card_click, outputs=[input])
 
                         antd.Divider("setting")
 
@@ -136,7 +121,7 @@ with gr.Blocks(css_paths="app.css") as demo:
                     with antd.Drawer(open=False, title="history", placement="left", width="900px") as history_drawer:
                         history_output = legacy.Chatbot(show_label=False, flushing=False, height=960, elem_classes="history_chatbot")
 
-                    historyBtn.click(history_render, inputs=[history], outputs=[history_drawer, history_output])
+                    historyBtn.click(history_render, inputs=[history_state], outputs=[history_drawer, history_output])
                     history_drawer.close(lambda: gr.update(
                         open=False), inputs=[], outputs=[history_drawer])
 
@@ -146,62 +131,70 @@ with gr.Blocks(css_paths="app.css") as demo:
                         with antd.Tabs(active_key="empty", render_tab_bar="() => null") as state_tab:
                             with antd.Tabs.Item(key="empty"):
                                 empty = antd.Empty(description="empty input", elem_classes="right_content")
-                                with antd.Tabs.Item(key="loading"):
-                                    loading = antd.Spin(True, tip="coding...", size="large", elem_classes="right_content")
-                                with antd.Tabs.Item(key="render"):
-                                    sandbox = gr.HTML(elem_classes="html_content")
-                                # sandbox = pro.FrontendCodeSandbox(elem_style={
-                                #   'height': '920px',
-                                #   'width': '100%'
-                                # })
-
-            def generation_code(query: Optional[str], _setting: Dict[str, str], _history: Optional[History]):
-              if query is None:
-                  query = ''
-              if _history is None:
-                  _history = []
-              messages = history_to_messages(_history, _setting['system'])
-              messages.append({'role': Role.USER, 'content': query})
-
-              gen = Generation.call(model="qwen2.5-coder-32b-instruct",
-                                    messages=messages,
-                                    result_format='message',
-                                    stream=True)
-              for response in gen:
-                  if response.status_code == HTTPStatus.OK:
-                      role = response.output.choices[0].message.role
-                      content = response.output.choices[0].message.content
-                      if response.output.choices[0].finish_reason == 'stop':
-                        _history = messages_to_history(messages + [{
-                            'role': role,
-                            'content': content
-                        }])
-                        print('history')
-                        print(_history)
-                        yield {
-                            code_output: content,
-                            history: _history,
-                            sandbox: send_to_sandbox(remove_code_block(content)),
-                            state_tab:  gr.update(active_key="render"),
-                            code_drawer:  gr.update(open=False),
-                        }
-                      else:
-                        yield {
-                            code_output: content,
-                            state_tab:  gr.update(active_key="loading"),
-                            code_drawer: gr.update(open=True),
-                        }                      
-                  else:
-                      raise ValueError(
-                          'Request id: %s, Status code: %s, error code: %s, error message: %s'
-                          % (response.request_id, response.status_code, response.code,
-                            response.message))
-
-            btn.click(generation_code,
-                      inputs=[input, setting, history],
-                      outputs=[code_output, history, sandbox, state_tab, code_drawer])
-            
-            clear_btn.click(clear_history, inputs=[], outputs=[history])
+                            with antd.Tabs.Item(key="loading"):
+                                loading = antd.Spin(True, tip="coding...", size="large", elem_classes="right_content")
+                            with antd.Tabs.Item(key="render"):
+                                sandbox = gr.HTML(elem_classes="html_content")
+
+        def generation_code(query: Optional[str], _setting: Dict[str, str], _history: Optional[History]):
+            if query is None:
+                query = ''
+            if _history is None:
+                _history = []
+
+            # Prepare the preprocess and postprocess functions
+            def preprocess(message, history):
+                messages = [{'role': 'system', 'content': _setting['system']}]
+                for user_msg, assistant_msg in history:
+                    messages.append({'role': 'user', 'content': user_msg})
+                    messages.append({'role': 'assistant', 'content': assistant_msg})
+                messages.append({'role': 'user', 'content': message})
+                return {'messages': messages}
+
+            def postprocess(response_text):
+                return response_text
+
+            # Get the model from hyperbolic_gradio
+            fn = hyperbolic_gradio.get_fn(
+                model_name='Qwen/Qwen2.5-Coder-32B-Instruct',
+                preprocess=preprocess,
+                postprocess=postprocess,
+                api_key=YOUR_API_TOKEN,
+                base_url="https://api.hyperbolic.xyz/v1"
+            )
+
+            response_text = ''
+            assistant_response = ''
+            local_history = _history.copy()
+
+            for content in fn(query, local_history):
+                response_text = content
+                # Update code_output
+                yield {
+                    code_output: response_text,
+                    state_tab: gr.update(active_key="loading"),
+                    code_drawer: gr.update(open=True),
+                }
+
+            assistant_response = response_text
+            local_history.append([query, assistant_response])
+
+            code = remove_code_block(assistant_response)
+
+            yield {
+                code_output: assistant_response,
+                history_state: local_history,
+                sandbox: send_to_sandbox(code),
+                state_tab: gr.update(active_key="render"),
+                code_drawer: gr.update(open=False),
+            }
+
+        btn.click(generation_code,
+                  inputs=[input, setting, history_state],
+                  outputs=[code_output, history_state, sandbox, state_tab, code_drawer])
+
+        clear_btn.click(clear_history, inputs=[], outputs=[history_state])
 
 if __name__ == "__main__":
     demo.queue(default_concurrency_limit=20).launch(ssr_mode=False)
+

requirements.txt

@@ -1,2 +1,3 @@
 dashscope
-modelscope_studio~=1.0.0b
+modelscope_studio~=1.0.0b
+hyperbolic-gradio