h2oai / h2ogpt

Private chat with local GPT with document, images, video, etc. 100% private, Apache 2.0. Supports oLLaMa, Mixtral, llama.cpp, and more. Demo: https://gpt.h2o.ai/ https://gpt-docs.h2o.ai/
http://h2o.ai
Apache License 2.0
11.4k stars 1.25k forks source link

enable google analytics #321

Closed pseudotensor closed 1 year ago

pseudotensor commented 1 year ago

https://github.com/gradio-app/gradio/discussions/1946

I have mounted Gradio inside FastAPI and successfully injected Google Analytics into the app. Here is a technique to inject any content into your app:

from fastapi import FastAPI, Request, Response

filenames = ["js/anyadditioanlscripts.js"]
contents = "\n".join(
    [f"<script type='text/javascript' src='{x}'></script>" for x in filenames]
)

ga_script = """
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CODEHERE"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-CODEHERE');
</script>
"""

app = FastAPI()

@app.middleware("http")
async def insert_js(request: Request, call_next):
    path = request.scope["path"]  # get the request route
    response = await call_next(request)

    if path == "/":
        response_body = ""
        async for chunk in response.body_iterator:
            response_body += chunk.decode()

        charset_tag = '<meta charset="utf-8" />'
        if charset_tag in response_body:
            response_body = response_body.replace(charset_tag, charset_tag + ga_script)

        response_body = response_body.replace("</body>", contents + "</body>")

        del response.headers["content-length"]

        return Response(
            content=response_body,
            status_code=response.status_code,
            headers=dict(response.headers),
            media_type=response.media_type,
        )

    return response

app.mount("/js", StaticFiles(directory="js"), name="js")
gr.mount_gradio_app(app, demo, path="/")
@aghand0ur You can use the technique above, just change the charset_tag with something appropriate (in case it did not work for you).

I have modified the code from this [Hugging Face space](https://huggingface.co/spaces/jonigata/PoseMaker2).

aghand0ur reacted with thumbs up emoji
4 replies
@pngwn
Comment options
pngwn
on Apr 25
Maintainer
@abidlabs I think we could potentially add a kwarg to launch or something to allow users to inject their own script tags into the head of the document. This would be simpler and more robust than intercepting + modifying the HTML file like this. This is a relatively common usecase, not just for GA but other insight tracking tools. It would also be a pretty clean way to add other third party library hosted on a cdn.

Alternatively we could ask users for a list of scripts to add and inject them in the Svelte code instead of adding them to the status HTML, this would give us more flexibility.

Alternatively alternatively, we could do this with a custom component when we launch that feature. I think this would be possible with a simple component, although it might need some special treatment. Maybe this is the best option to keep API surface area + complexity low.

@achyut-joshi
Comment options
achyut-joshi
3 weeks ago
Was this added?

@[pngwn](https://github.com/pngwn)
Comment options
pngwn
3 weeks ago
Maintainer
Not yet, no.

@khilnani
Comment options
khilnani
3 days ago
It would be great to be able to have a some generic mechaanism to include other custom html metadata and scripts in to an app - launch props sounds like a nice idea. A few use cases - GA or some other analytics tool for UX/Usability testing, a help widget for people to report issues (vs. coding one specifically in the app) , update HTML metadata (e.g. folks post demo links in slack, and with the right meta data Slack can show cards) .etc. Thanks!
pseudotensor commented 1 year ago

https://huggingface.co/spaces/jonigata/PoseMaker2/blob/main/main.py

import gradio as gr
import json as js
import util
from fastapi.staticfiles import StaticFiles
from fileservice import app
from pose import infer, draw

def image_changed(image):
  if image == None:
    return "estimation", {}

  if 'openpose' in image.info:
    print("pose found")
    jsonText = image.info['openpose']
    jsonObj = js.loads(jsonText)
    subset = jsonObj['subset']
    return f"""{image.width}px x {image.height}px, {len(subset)} indivisual(s)""", jsonText
  else:
    print("pose not found")
    pose_result, returned_outputs = infer(util.pil2cv(image))

    candidate = []
    subset = []
    for d in pose_result:
        n = len(candidate)
        if d['bbox'][4] < 0.9: 
            continue
        keypoints = d['keypoints'][:, :2].tolist()
        midpoint = [(keypoints[5][0] + keypoints[6][0]) / 2, (keypoints[5][1] + keypoints[6][1]) / 2]
        keypoints.append(midpoint)
        candidate.extend(util.convert_keypoints(keypoints))
        m = len(candidate)
        subset.append([j for j in range(n, m)])

    jsonText = "{ \"candidate\": " + util.candidate_to_json_string(candidate) + ", \"subset\": " + util.subset_to_json_string(subset) + " }"
    return f"""{image.width}px x {image.height}px, {len(subset)} indivisual(s)""", jsonText

html_text = f"""
    <canvas id="canvas" width="512" height="512"></canvas><img id="canvas-background" style="display:none;"/>
"""

with gr.Blocks(css="""button { min-width: 80px; }""") as demo:
  with gr.Row():
    with gr.Column(scale=1):
      width = gr.Slider(label="Width", minimum=512, maximum=1024, step=64, value=512, interactive=True)
      height = gr.Slider(label="Height", minimum=512, maximum=1024, step=64, value=512, interactive=True)
      with gr.Accordion(label="Pose estimation", open=False):
        source = gr.Image(type="pil")
        estimationResult = gr.Markdown("""estimation""")
        with gr.Row():
          with gr.Column(min_width=80):
            applySizeBtn = gr.Button(value="Apply size")
          with gr.Column(min_width=80):
            replaceBtn = gr.Button(value="Replace")
          with gr.Column(min_width=80):
            importBtn = gr.Button(value="Import")
          with gr.Column(min_width=80):
            bgBtn = gr.Button(value="Background")
          with gr.Column(min_width=80):
            removeBgBtn = gr.Button(value="RemoveBG")
      with gr.Accordion(label="Json", open=False):
        with gr.Row():
          with gr.Column(min_width=80):
            replaceWithJsonBtn = gr.Button(value="Replace")
          with gr.Column(min_width=80):
            importJsonBtn = gr.Button(value="Import")
        gr.Markdown("""
| inout            | how to                                                                               |
| -----------------| ----------------------------------------------------------------------------------------- |
| Import | Paste json to "Json source" and click "Read", edit the width/height, then click "Replace" or "Import". |
| Export | click "Save" and "Copy to clipboard" of "Json" section.                                             |
""")
        json = gr.JSON(label="Json")
        jsonSource = gr.Textbox(label="Json source", lines=10)
      with gr.Accordion(label="Notes", open=False):
        gr.Markdown("""
#### How to bring pose to ControlNet
1. Press **Save** button
2. **Drag** the file placed at the bottom left corder of browser
3. **Drop** the file into ControlNet

#### Reuse pose image
Pose image generated by this tool has pose data in the image itself. You can reuse pose information by loading it as the image source instead of a regular image.

#### Points to note for pseudo-3D rotation
When performing pseudo-3D rotation on the X and Y axes, the projection is converted to 2D and Z-axis information is lost when the mouse button is released. This means that if you finish dragging while the shape is collapsed, you may not be able to restore it to its original state. In such a case, please use the "undo" function.

#### Pose estimation
In this project, MMPose is used for pose estimation.
""")
    with gr.Column(scale=2):
      html = gr.HTML(html_text)
      with gr.Row():
        with gr.Column(scale=1, min_width=60):
          saveBtn = gr.Button(value="Save")
        with gr.Column(scale=7):
          gr.Markdown("""
- "ctrl + drag" to **scale**
- "alt + drag" to **move**
- "shift + drag" to **rotate** (move right first, release shift, then up or down)
- "space + drag" to **range-move**
- "[", "]" or "Alt + wheel" or "Space + wheel" to shrink or expand **range**
- "ctrl + Z", "shift + ctrl + Z" to **undo**, **redo**
- "ctrl + E" **add** new person
- "D + click" to **delete** person
- "Q + click" to **cut off** limb
- "X + drag" to **x-axis** pseudo-3D rotation
- "C + drag" to **y-axis** pseudo-3D rotation
- "R + click" to **repair**
- "H + click" to **hide** node

When using Q, X, C, R, pressing and dont release until the operation is complete.

[Contact us for feature requests or bug reports (anonymous)](https://t.co/UC3jJOJJtS)
""")

  width.change(fn=None, inputs=[width], _js="(w) => { resizeCanvas(w,null); }")
  height.change(fn=None, inputs=[height], _js="(h) => { resizeCanvas(null,h); }")

  source.change(
    fn = image_changed,
    inputs = [source],
    outputs = [estimationResult, json])
  applySizeBtn.click(
    fn = lambda x: (x.width, x.height),
    inputs = [source], 
    outputs = [width, height])
  replaceBtn.click(
    fn = None,
    inputs = [json],
    outputs = [],
    _js="(json) => { initializeEditor(); importPose(json); return []; }")
  importBtn.click(
    fn = None,
    inputs = [json],
    outputs = [],
    _js="(json) => { importPose(json); return []; }")
  bgBtn.click(
    fn = None,
    inputs = [source],
    outputs = [],
    _js="(image) => { importBackground(image); return []; }")
  removeBgBtn.click(
    fn = None,
    inputs = [],
    outputs = [],
    _js="() => { importBackground(null); return []; }")

  saveBtn.click(
    fn = None,
    inputs = [], outputs = [json],
    _js="() => { return savePose(); }")
  jsonSource.change(
    fn = lambda x: x,
    inputs = [jsonSource], outputs = [json])
  replaceWithJsonBtn.click(
    fn = None,
    inputs = [json],
    outputs = [],
    _js="(json) => { initializeEditor(); importPose(json); return []; }")
  importJsonBtn.click(
    fn = None,
    inputs = [json],
    outputs = [],
    _js="(json) => { importPose(json); return []; }")
  demo.load(fn=None, inputs=[], outputs=[], _js="() => { initializeEditor(); importPose(); return []; }")

print("mount")
app.mount("/js", StaticFiles(directory="js"), name="js")
gr.mount_gradio_app(app, demo, path="/")
pseudotensor commented 1 year ago

Consider for rate limiting with fastapi, slowapi: https://github.com/laurentS/slowapi

pseudotensor commented 1 year ago

heap ok