<html lang="en">
  <head>
      <!-- Global site tag (gtag.js) - Google Analytics -->
      <script async
              src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script>
      <script>
          window.dataLayer = window.dataLayer || [];

          function gtag() {
              dataLayer.push(arguments);
          }

          gtag('js', new Date());

          gtag('config', 'UA-156449732-1');
      </script>

      <!-- <iframe src=""></iframe> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta property="og:url" content="https://gradio.app/" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="{{ config['thumbnail'] or '' }}" />
    <meta property="og:title" content="{{ config['title'] or '' }}" />
    <meta property="og:description" content="{{ config['description'] or '' }}" />
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:creator" content="@teamGradio">
    <meta name="twitter:title" content="{{ config['title'] or '' }}">
    <meta name="twitter:description" content="{{ config['description'] or '' }}">
    <meta name="twitter:image" content="{{ config['thumbnail'] or '' }}">

    <title>Gradio</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <!-- VENDOR -->
    <link type="text/css" href="{{ vendor_prefix }}/static/css/vendor/jquery-ui.css" rel="stylesheet">
    {% if "image" in input_interfaces %}
    <link type="text/css" href="{{ vendor_prefix }}/static/css/vendor/tui-color-picker.css" rel="stylesheet">
    <link type="text/css" href="{{ vendor_prefix }}/static/css/vendor/tui-image-editor.css" rel="stylesheet">
    <link type="text/css" href="{{ vendor_prefix }}/static/css/vendor/cropper.min.css" rel="stylesheet">
    {% endif %}
    {% if "dataframe" in input_interfaces or "dataframe" in output_interfaces %}
    <link type="text/css" href="{{ vendor_prefix }}/static/css/vendor/jexcel.min.css" rel="stylesheet">
    <link type="text/css" href="{{ vendor_prefix }}/static/css/vendor/jsuites.min.css" rel="stylesheet">
    {% endif %}
    {% if "json" in output_interfaces %}
    <link type="text/css" href="{{ vendor_prefix }}/static/css/vendor/jsonTree.css" rel="stylesheet">    
    {% endif %}


    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/gradio.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/interfaces/input/image.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/interfaces/input/sketchpad.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/interfaces/input/textbox.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/interfaces/input/radio.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/interfaces/input/dropdown.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/interfaces/input/checkbox_group.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/interfaces/input/slider.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/interfaces/input/webcam.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/interfaces/input/microphone.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/interfaces/input/file.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/interfaces/output/image.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/interfaces/output/label.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/interfaces/output/key_values.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/interfaces/output/textbox.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/interfaces/output/highlighted_text.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/interfaces/output/audio.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/interfaces/output/json.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/interfaces/output/html.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/loading.css') }}"/>
    {% if css is not none %}
    <style>{{ css }}</style>
    {% endif %}
  </head>

  <body id="lib">
    <div id="interface_target" class="container"></div>
    <div id="credit"><a href="https://github.com/gradio-app/gradio" target="_blank">
      <img src="/static/img/logo_inline.png">
    </a></div>
    <!-- VENDOR -->
    <script src="{{ vendor_prefix }}/static/js/vendor/jquery.min.js"></script>
    <script src="{{ vendor_prefix }}/static/js/vendor/html2canvas.min.js"></script>
    <script src="{{ vendor_prefix }}/static/js/vendor/jquery-ui.min.js"></script>
    <script src="{{ vendor_prefix }}/static/js/vendor/jquery.ui.touch-punch.js"></script>
    {% if "image" in input_interfaces %}
    <script src="{{ vendor_prefix }}/static/js/vendor/fabric.js"></script>
    <script src="{{ vendor_prefix }}/static/js/vendor/tui-code-snippet.min.js"></script>
    <script src="{{ vendor_prefix }}/static/js/vendor/FileSaver.min.js"></script>
    <script src="{{ vendor_prefix }}/static/js/vendor/tui-color-picker.js"></script>
    <script src="{{ vendor_prefix }}/static/js/vendor/tui-image-editor.js"></script>
    <script src="{{ vendor_prefix }}/static/js/vendor/white-theme.js"></script>
    <script src="{{ vendor_prefix }}/static/js/vendor/black-theme.js"></script>
    <script src="{{ vendor_prefix }}/static/js/vendor/cropper.min.js"></script>
    <script src="{{ vendor_prefix }}/static/js/vendor/sketchpad.js"></script>
    <script src="{{ vendor_prefix }}/static/js/vendor/webcam.min.js"></script>
    {% endif %}
    {% if "audio" in input_interfaces or "audio" in output_interfaces %}
    <script src="{{ vendor_prefix }}/static/js/vendor/wavesurfer.min.js"></script>
    {% endif %}
    {% if "audio" in input_interfaces %}
    <script src="{{ vendor_prefix }}/static/js/vendor/p5.min.js"></script>
    <script src="{{ vendor_prefix }}/static/js/vendor/p5.sound.min.js"></script>
    <script src="{{ vendor_prefix }}/static/js/vendor/p5.dom.min.js"></script>
    {% endif %}
    {% if "dataframe" in input_interfaces or "dataframe" in output_interfaces %}
    <script src="{{ vendor_prefix }}/static/js/vendor/jexcel.min.js"></script>
    <script src="{{ vendor_prefix }}/static/js/vendor/jsuites.min.js"></script>
    {% endif%}
    {% if "json" in output_interfaces %}
    <script src="{{ vendor_prefix }}/static/js/vendor/jsonTree.js"></script>
    {% endif %}
    <script src="{{ vendor_prefix }}/static/js/vendor/Chart.min.js"></script>
    <script src="{{ vendor_prefix }}/static/js/vendor/gifcap/gifencoder.js"></script>

    <script src="{{ url_for('static', filename='js/utils.js') }}"></script>
    <script src="{{ url_for('static', filename='js/all_io.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/input/image.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/input/video.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/input/sketchpad.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/input/textbox.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/input/number.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/input/radio.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/input/checkbox_group.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/input/checkbox.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/input/dropdown.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/input/slider.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/input/dataframe.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/input/audio.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/input/file.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/input/webcam.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/input/microphone.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/output/image.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/output/video.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/output/label.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/output/key_values.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/output/textbox.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/output/highlighted_text.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/output/audio.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/output/json.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/output/html.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/output/dataframe.js') }}"></script>
    <script src="{{ url_for('static', filename='js/interfaces/output/file.js') }}"></script>
    <script src="{{ url_for('static', filename='js/gradio.js') }}"></script>
    <script>
      $.getJSON("/config/", function(config) {
        {% if examples %}
        config["examples"] = {{ examples|tojson }};
        config["hide_run_all"] = true;
        {% endif %}
        io = gradio_url(config, "/api/", "#interface_target", "/file/{% if path %}{{ path }}/{% endif %}");
      });
      const copyToClipboard = str => {
        const el = document.createElement('textarea');
        el.value = str;
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
      };
    </script>
  </body>
</html>
