app.py

import gradio as gr
import base64
import requests
import uuid
import os

USER_ID = str(uuid.uuid4())
SERVER_URL = "https://lavague.mithrilsecurity.io"

title = """
<div align="center">
  <h1>🌊 Welcome to LaVague</h1>
  <p>Redefining internet surfing by transforming natural language instructions into seamless browser interactions.</p>
</div>
"""

# action_engine = ActionEngine(llm, embedder)

def exec_code_req(url, query):
    headers = {
        "X-User-ID": USER_ID,  # Include the X-User-ID header for authentication
        "X-API-Key": os.environ['API_KEY'] 
    }
    try:
        response = requests.post(SERVER_URL + "/execute_req", json={"url": url, "query": query}, headers=headers)
        if response.status_code == 200:
            return response.json()
        else:
            return {"error": f"Failed with status code {response.status_code}"}
    except requests.RequestException as e:
        return {"error": str(e)}

def get_screenshot_req(url):
    headers = {
        "X-User-ID": USER_ID,  # Include the X-User-ID header for authentication
        "X-API-Key": os.environ['API_KEY'] 
    }
    try:
        response = requests.get(SERVER_URL + "/screenshot", params={"url": url}, headers=headers)
        if response.status_code == 200:
            return response.json()
        else:
            return {"error": f"Failed with status code {response.status_code}"}
    except requests.RequestException as e:
        return {"error": str(e)}

def process_url(url):
    r = get_screenshot_req(url)
    f = open("screenshot.png", "wb")
    scr = base64.b64decode(r["result"])
    f.write(scr)
    return "screenshot.png"

def exec_code(code, source_nodes, full_code, url, query):
    html = ""
    try:
        r = exec_code_req(url, query)
        url = r["url"]
        html = r["html"]
        code = r["code"]
        source_nodes = r["source_nodes"]
        output = "Successful code execution"
        status = """<p style="color: green; font-size: 20px; font-weight: bold;">Success!</p>"""
        full_code += code
        try:
            tel = requests.post('https://telemetrylavague.mithrilsecurity.io/telemetry', json={"llm": "NousResearch/Nous-Hermes-2-Mixtral-8x7B-DPO", "user_id": USER_ID})
        except Exception:
            pass
    except Exception as e:
        output = f"Error in code execution: {str(e)}"
        status = """<p style="color: red; font-size: 20px; font-weight: bold;">Failure! Open the Debug tab for more information</p>"""
    return output, code, html, status, full_code, url, source_nodes

def update_image_display(img, url):
    r = get_screenshot_req(url)
    f = open("screenshot.png", "wb")
    scr = base64.b64decode(r["result"])
    f.write(scr)
    return "screenshot.png", url

def show_processing_message():
    return "Processing..."

def create_demo(base_url, instructions):
  with gr.Blocks() as demo:
      with gr.Tab("LaVague"):
        with gr.Row():
            gr.HTML(title)
        with gr.Row():
            url_input = gr.Textbox(value=base_url, label="Enter URL and press 'Enter' to load the page.")
        
        with gr.Row():
            with gr.Column(scale=7):
                image_display = gr.Image(label="Browser", interactive=False)
            
            with gr.Column(scale=3):
                with gr.Accordion(label="Full code", open=False):
                    full_code = gr.Code(value="", language="python", interactive=False)
                code_display = gr.Code(label="Generated code", language="python",
                                        lines=5, interactive=True)
                
                status_html = gr.HTML()
        with gr.Row():
            with gr.Column(scale=8):
                text_area = gr.Textbox(label="Enter instructions and press 'Enter' to generate code.")
                gr.Examples(examples=instructions, inputs=text_area)
      with gr.Tab("Debug"):
        with gr.Row():
            with gr.Column():
                log_display = gr.Textbox(interactive=False, lines=20)
            with gr.Column():
                source_display = gr.Code(language="html", label="Retrieved nodes", interactive=False, lines=20)
        with gr.Row():
            with gr.Accordion(label="Full HTML", open=False):
                full_html = gr.Code(language="html", label="Full HTML", interactive=False, lines=20)
  
      # Linking components
      url_input.submit(process_url, inputs=url_input, outputs=image_display, queue=False)
      text_area.submit(show_processing_message, outputs=[status_html], queue=False).then(
          exec_code, inputs=[code_display, source_display, full_code, url_input, text_area], 
          outputs=[log_display, code_display, full_html, status_html, full_code, url_input, source_display], queue=False
      ).then(
          update_image_display, inputs=[image_display, url_input], outputs=[image_display, url_input], queue=False
      )
  demo.launch(share=True, debug=True)

base_url = "https://huggingface.co/"

instructions = ["Click on the Datasets item on the menu, between Models and Spaces",
                "Click on the search bar 'Filter by name', type 'The Stack', and press 'Enter'",
                "Scroll by 500 pixels",]

create_demo(base_url, instructions)