Gift to the community ... a simple html frontend to interact with your local g4f/api instance #2350

manatlan · 2024-11-13T18:36:01Z

manatlan
Nov 13, 2024

Here is a simple HTML page to interact with your "http://localhost:1337/v1/chat/completions", to test models manually.

Just copy/paste the content below in a local file (example: "test.html"), and double-click on this file (it will be opened in your default browser) :

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width,initial-scale=1" />
      <link rel="stylesheet" href="https://pyscript.net/releases/2024.10.2/core.css">
      <script type="module" src="https://pyscript.net/releases/2024.10.2/core.js"></script>
  </head>
  <body>
   loading...
    <script type="py" config='{"packages":["htag","htagui","requests"]}'>
###############################################################################
import requests
from htag import Tag
from htagui import shoelace as ui

MODELS=["gpt-4o-mini","gpt-4o","gpt-4","llama-3.1-70b","mixtral-8x22b","gemini-flash","gemini-pro","claude-3.5-sonnet"]

class G4fReponse(str):
    model: str
    provider: str

def g4f_ask(messages:list,model) -> G4fReponse:
    url = "http://localhost:1337/v1/chat/completions"
    data = {
        "messages": messages,
        "model": model,
        "stream": False,
        "temperature": 0,
    }
    response = requests.post(url, headers={"Content-Type": "application/json"}, json=data)
    response.raise_for_status()
    
    j=response.json()
    r = G4fReponse("".join([i["message"]["content"] for i in j["choices"]]))
    r.model = j.get("model")
    r.provider = j.get("provider")
    return r

class Text(Tag.pre):
    def init(self, txt:str, provider=None):
        self["style"]="white-space: pre-wrap;margin:0px"
        self <= txt
        if provider is None:
            self["style"].set("background","#EEE")
        else:
            self <= Tag.span(provider,_style="float:right;background:#EEF")
            self["style"].set("padding","4px")

class App(ui.App):
    statics=Tag.title("G4F tester"),
    def init(self):
        self.messages = [dict(role="system",content="fun responses")]        
        self.iout = Tag.div(_style="display:flex;flex-flow: column nowrap; flex-direction: column-reverse")
        
        with ui.Grid("10fr 2fr 1fr") as g:
            g <= ui.Input(_value="Who is lara croft",_name="q",_placeholder="input something")
            g <= ui.Select( MODELS,_value=MODELS[0], _name="m")
            g <= ui.Button("ask",_onclick=self.bind( self.ask, b"document.getElementsByName('m')[0].value",b"document.getElementsByName('q')[0].value" ))
        self <= g + self.iout
        
    def ask(self,model:str,q:str):
        if q.strip():
            self.messages.append( dict(role="user",content=q) )
            r=g4f_ask(self.messages,model=model)
            self.messages.append( dict(role="assistant",content=r) )
            
            self.iout <= Text(r,f"{r.provider}/{r.model}") + Text(f"[{model}] {q} ?")

###############################################################################
from htag.runners import PyScript
PyScript( App ).run( )
    
  </script>
  </body>
</html>

it's simple (under the hood : it uses pyscript, htag & requests ... only python in html context)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gift to the community ... a simple html frontend to interact with your local g4f/api instance #2350

{{title}}

Replies: 0 comments

Select a reply

Gift to the community ... a simple html frontend to interact with your local g4f/api instance #2350

manatlan Nov 13, 2024

Replies: 0 comments

manatlan
Nov 13, 2024