tiny-assistant/index.html at main · ceddc/tiny-assistant · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tiny Assistant</title>
    <link rel="icon" href="./favicon.svg" type="image/svg+xml" />
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
    <script type="module" src="./tiny-assistant.js"></script>
  </head>
  <body>
    <main class="app-shell">
      <section class="map-stage" aria-label="Tiny Assistant map demo">
        <arcgis-map
          id="demo-map"
          item-id="c13bffcad4a244a99062e915e9bc1dc3">
          <arcgis-zoom slot="top-left"></arcgis-zoom>
          <arcgis-expand slot="top-left">
            <arcgis-legend></arcgis-legend>
          </arcgis-expand>
        </arcgis-map>

        <calcite-panel
          id="demo-intro-panel"
          class="demo-intro-panel"
          heading="Tiny Assistant"
          closable>
          <div class="demo-intro-content">
            <p>
              This Tiny Assistant demo is based on Esri's ArcGIS Maps SDK for
              JavaScript
              <a
                href="https://developers.arcgis.com/javascript/latest/sample-code/ai-assistant/"
                target="_blank"
                rel="noreferrer">
                AI Assistant component sample
              </a>,
              using the Change in wheat production 2017-2022 web map.
            </p>
            <p>
              ArcGIS AI Assistant can navigate the map, answer questions about
              the wheat production layers, and help inspect the data through
              chat.
            </p>
            <p>
              The chat opens after signing in with an eligible ArcGIS Online
              organization account where AI assistants are enabled and your
              role can use them.
            </p>
            <p>
              Weekend AI experiment: can a Codex/ChatGPT-style "pet" become a
              tiny assistant that replaces the standard ArcGIS AI Assistant
              panel?
            </p>
            <p class="demo-intro-hint">
              Tip: right-click the assistant character to open a small menu,
              including an option to follow your cursor.
            </p>
            <a
              href="https://developers.arcgis.com/javascript/latest/agentic-apps/ai-faq/"
              target="_blank"
              rel="noreferrer">
              ArcGIS AI account requirements
            </a>
            <a
              class="demo-intro-repo-link"
              href="https://github.com/ceddc/tiny-assistant"
              target="_blank"
              rel="noreferrer">
              <svg aria-hidden="true" viewBox="0 0 16 16" focusable="false">
                <path
                  d="M8 1.2a6.9 6.9 0 0 0-2.2 13.5c.3.1.4-.1.4-.3v-1.2c-1.7.4-2.1-.7-2.1-.7-.3-.6-.7-.8-.7-.8-.6-.4 0-.4 0-.4.6 0 1 .7 1 .7.6 1 1.5.7 1.8.5.1-.4.2-.7.4-.8-1.4-.2-2.8-.7-2.8-3 0-.7.2-1.2.7-1.7-.1-.2-.3-.8.1-1.7 0 0 .6-.2 1.8.7.5-.1 1.1-.2 1.7-.2s1.1.1 1.7.2c1.2-.9 1.8-.7 1.8-.7.4.9.1 1.5.1 1.7.4.5.7 1 .7 1.7 0 2.3-1.4 2.8-2.8 3 .2.2.4.6.4 1.2v1.7c0 .2.1.4.4.3A6.9 6.9 0 0 0 8 1.2Z" />
              </svg>
              GitHub repo
            </a>
          </div>
        </calcite-panel>

        <button
          id="demo-intro-toggle"
          class="demo-intro-toggle"
          type="button"
          hidden>
          Info
        </button>

        <tiny-arcgis-assistant
          sprites='{"globby":"./assets/globby-spritesheet.webp","globby-may-4th":"./assets/globbymay4-spritesheet.webp","clippy":"./assets/clippy-spritesheet.webp","boba":"./assets/boba-spritesheet.webp"}'
          reference-element="#demo-map"
          suggested-prompts='["Go to the county that produced the most wheat in 2022.", "How does that compare to the average county that produced wheat?", "How many counties produced less wheat in 2022 than in 2017?"]'
          heading="Change in wheat production 2017-2022"
          description="Explore wheat production in the U.S. from 2017 to 2022.">
          <arcgis-assistant-navigation-agent></arcgis-assistant-navigation-agent>
          <arcgis-assistant-data-exploration-agent></arcgis-assistant-data-exploration-agent>
          <arcgis-assistant-help-agent></arcgis-assistant-help-agent>
        </tiny-arcgis-assistant>
      </section>
    </main>
  </body>
</html>