app.py

import gradio as gr

js = """
function appJS() {
  document.getElementById("plugin-selector-submit").addEventListener("click", function() {
    document.getElementById("plugin-config-row").classList.toggle("active",true);
  });

  document.getElementById("plugin-input-finder-btn").addEventListener("click", function() {
    document.getElementById("plugin-metadata-inputs-row").classList.toggle("active",true);
  });

  document.getElementById("plugin-input-finder-submit").addEventListener("click", function() {
    document.getElementById("plugin-metadata-inputs-row").classList.toggle("active",false);
  });

  document.getElementById("plugin-config-submit").addEventListener("click", function() {
    document.getElementById("plugin-outputs-row").classList.toggle("active",true);
  });

  document.getElementById("generate-manifest-btn").addEventListener("click", function() {
    // Content of your YAML file
    const yamlContent = `
    name: My Manifest File
    description: My First Manifest File 💚
    initialize:
      outputs: ['yaml']
      plugins:
        group-by:
          path: 'builtin'
          method: GroupBy
        operational-carbon:
          path: '@grnsft/if-plugins'
          method: Multiply
          global-config:
            input-parameters: ['cpu/energy', 'grid/carbon-intensity']
            output-parameter: 'carbon'
        watttime:
          path: '@grnsft/if-unofficial-plugins'
          method: WattTimeGridEmissions
        teads-curve:
          path: '@grnsft/if-unofficial-plugins'
          method: TeadsCurve
          global-config:
            interpolation: spline
        cloud-metadata:
          method: CloudMetadata
          path: "@grnsft/if-plugins"
        mock-observations:
          path: '@grnsft/if-plugins'
          method: MockObservations
          global-config:
            timestamp-from: '2024-03-05T00:00:00.000Z'
            timestamp-to: '2024-03-05T00:01:00.000Z'
            duration: 10
            components:
              - name: server-1
                cloud/instance-type: Standard_E64_v3
                cloud/region: westus3
              - name: server-2
                cloud/instance-type: Standard_E64_v3
                cloud/region: westus3
            generators:
              common:
                cloud/vendor: azure
              randint:
                cpu/utilization:
                  min: 1
                  max: 99
        'time-sync':
          method: TimeSync
          path: "builtin"
          global-config:
            start-time: '2024-03-05T00:00:00.000Z'
            end-time: '2024-03-05T00:01:00.000Z'
            interval: 5
            allow-padding: true
    tree:
      pipeline:
        - mock-observations #provides sample usage data from a given geographic region with a simulated cpu / memory utilization.
        - group-by #groups inputs, in this case cloud and region
        - time-sync #standardizes the time format of observations
        - cloud-metadata #determine an instance's physical processor and thermal design power (TDP) based on its instance name (cloud vendor e.g. aws and instance type e.g. m5.large)
        - watttime #determine the carbon intensity of the grid based on the region (e.g. CAISO)
        - teads-curve #estimating CPU usages across varying type of CPUs using a Teads Curve (requires CPU TDP, Utilization, and Duration)
        - operational-carbon #combines two or more elements in an array, in this case energy in kWH and grid carbon intensity)
      defaults:
      config:
        group-by:
          group:
            - cloud/region
            - name
      inputs: null
    `;

    // Create a Blob object from the YAML content
    const blob = new Blob([yamlContent], { type: "text/yaml" });

    // Create a temporary anchor element
    const a = document.createElement("a");
    const url = window.URL.createObjectURL(blob);

    // Set the attributes for downloading
    a.href = url;
    a.download = "data.yaml";

    // Programmatically click the anchor element to initiate download
    a.click();

    // Clean up resources
    window.URL.revokeObjectURL(url);
    //document.body.removeChild(element);
  });

}
"""

css = """
.plugin-accordion button span:first-child {
    font-size: 1.25rem !important;
}

.dependent-row {
  display: none !important;
}

.dependent-row.active {
  display: block !important;
}
"""

def populate_plugin_inputs():
  return [gr.Dropdown(["Select Vendor","AWS","GCP","Azure","Other"], label="Cloud Vendor", info="Where is your data hosted?",interactive=True,value="AWS",elem_id="plugin_input_1",elem_classes=["dropdown-one-option"]), gr.Dropdown(["Select Instance","C5 Metal","d3.xlarge","m5.large"], label="Cloud Instance", info="Wnat cloud instance is your server using?",interactive=False,value="m5.large",elem_classes=["dependent-dropdown"],elem_id="plugin_input_2"),gr.Button("Help me find my inputs", elem_id="plugin-input-finder-btn",visible=False)]

def populate_plugin_input_1():
  return gr.Dropdown(["Select Vendor","AWS","GCP","Azure","Other"], label="Cloud Vendor", info="Where is your data hosted?",interactive=True,value="AWS",elem_id="plugin_input_1",elem_classes=["dropdown-one-option"])

def populate_plugin_input_2():
  return gr.Dropdown(["Select Instance","C5 Metal","d3.xlarge","m5.large"], label="Cloud Instance", info="Wnat cloud instance is your server using?",interactive=False,value="m5.large",elem_classes=["dependent-dropdown"],elem_id="plugin_input_2")

with gr.Blocks(css=css,js=js) as pipeline_builder:
  gr.Markdown("# 🚰 Impact Framework Pipeline Builder")
  gr.Markdown("Visually construct your Impact Framework manifest file pipeline with this helpful interface.")

  with gr.Accordion("ℹ️ About this Page",open=False,elem_classes=["plugin-accordion"]):
    gr.Markdown("### Why is this tool needed?")
    gr.Markdown("Currently, it can be hard to know where to find the right plugins for your pipeline, what they do, and how to configure them for your specific software workload.")
    gr.Markdown("### What does this tool do?")
    gr.Markdown("This is a prototype of a visual interface that would walk you step by step through constructing an IF pipeline, helping you to find the specific configuration values your software uses, and providing you with sample outputs to help you determine what plugin you need next.")

  with gr.Row(elem_id="plugin-selector-row",variant="panel"):
    with gr.Column():
      with gr.Row():
        gr.Markdown("## Find Your Plugin")
      with gr.Row():
        plugin_selector = gr.Dropdown(["Watt-Time","CO2.js","TDP Finder","Cloud Metadata"], label="Plugin",value="Cloud Metadata",interactive=True,info="Plugins available on the Impact Framework Registry")
      with gr.Row():
        plugin_selector_submit = gr.Button("Configure Plugin",elem_id="plugin-selector-submit")

  with gr.Row(elem_classes=["dependent-row"],elem_id="plugin-config-row", variant="panel"):
    with gr.Column():
      with gr.Row():
        gr.Markdown("## Configure Your Plugin")
      with gr.Row():
        gr.Markdown("### Cloud Metadata")
      with gr.Row(variant="panel"):
        plugin_input_1 = gr.Dropdown(["Select Vendor","AWS","GCP","Azure","Other"], label="Cloud Vendor", info="Where is your data hosted?",interactive=True,value="Select Vendor",elem_id="plugin_input_1",elem_classes=["dropdown-one-option"])
        plugin_input_2 = gr.Dropdown(["Select Instance","C5 Metal","d3.xlarge","m5.large"], label="Cloud Instance", info="Wnat cloud instance is your server using?",interactive=True,value="Select Instance",elem_classes=["dependent-dropdown"],elem_id="plugin_input_2")
      with gr.Row():
        plugin_input_finder_btn = gr.Button("Help me find my inputs", elem_id="plugin-input-finder-btn")
        plugin_config_submit = gr.Button("Submit configuration",variant="primary",elem_id="plugin-config-submit")



  with gr.Row(elem_classes=["dependent-row"],elem_id="plugin-metadata-inputs-row", variant="panel"):
    with gr.Row():
      gr.Markdown("## Find your Cloud Metadata inputs")
    with gr.Row():
      plugin_input_finder_url = gr.Textbox(placeholder="https://[your_website.com]", label="Your website URL", info="If you are measuring energy based on a hosted website, enter the URL",value="https://mywebsite.com",interactive=False)
    with gr.Row():
      plugin_input_finder_submit = gr.Button("Find Inputs",elem_id="plugin-input-finder-submit")

  with gr.Row(elem_classes=["dependent-row"],elem_id="plugin-outputs-row", variant="panel"):
    with gr.Column():
      with gr.Row():
        gr.Markdown("## Sample plugin outputs")
      with gr.Row():
        gr.Markdown("This is data you can expect to see in the output from the plugin.")
      with gr.Row():
        gr.Markdown("#### CPU/TDP")
      with gr.Row(variant="panel"):
        gr.Textbox(value=270,label="Amount")
        gr.Textbox(value="Watts",label="Units")
        gr.Textbox(value="CPU/GPU Heat Dissipation",label="ℹ️")

      with gr.Row():
        gr.Markdown("#### Memory")
      with gr.Row(variant="panel"):
        gr.Textbox(value=432,label="Amount")
        gr.Textbox(value="GB",label="Units")
      with gr.Row():
        gr.Markdown("#### Processor")
      with gr.Row(variant="panel"):
        gr.Textbox(value="Intel XEON 830C",label="type")
      with gr.Row():
        gr.Markdown("#### VCPUs")
      with gr.Row(variant="panel"):
        gr.Textbox(value="64 / 64",label="used / available")

      with gr.Row(elem_id="plugin-add-submit-row", variant="panel"):
        gr.Button("Add Another Plugin",variant="secondary",interactive=False)
        generate_manifest_btn = gr.Button("Generate Manifest",variant="primary",elem_id="generate-manifest-btn")

  plugin_input_finder_submit.click(fn=populate_plugin_inputs, outputs=[plugin_input_1,plugin_input_2,plugin_input_finder_btn])
  plugin_config_submit.click(fn=populate_plugin_inputs, outputs=[plugin_input_1,plugin_input_2,plugin_input_finder_btn])


pipeline_builder.launch()