opensim-stack.github.io/the-bots.html at main · opensim-stack/opensim-stack.github.io · 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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Bots — OpenSim AI Stack</title>
  <meta name="description" content="Meet your in-world AI assistants: Governor, Builder, and Actor bots.">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            dark: { 900: '#0a0a12', 800: '#12121f', 700: '#1a1a2e', 600: '#252542' },
            neon: { primary: '#8b5cf6', secondary: '#d946ef', accent: '#06b6d4' }
          }
        }
      }
    }
  </script>
  <link rel="stylesheet" href="styles.css">
</head>
<body class="min-h-screen bg-dark-900 text-gray-100">
  <canvas id="code-rain"></canvas>
  <div class="cyber-grid"></div>
  <div class="shape shape-1"></div>
  <div class="shape shape-2"></div>
  <div class="shape shape-3"></div>

  <nav class="navbar fixed top-0 left-0 right-0 z-50">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <a href="index.html" class="flex items-center gap-3 group">
        <img src="opensim-stack.png" alt="OpenSim AI Stack" class="h-10 w-auto drop-shadow-lg group-hover:drop-shadow-[0_0_10px_rgba(139,92,246,0.8)] transition-all">
        <span class="text-xl font-bold gradient-text">OpenSim AI Stack</span>
      </a>
      <div class="hidden md:flex items-center gap-1">
        <a href="index.html" class="px-3 py-2 rounded-lg text-gray-100 hover:text-neon-primary transition-colors">Home</a>
        <a href="the-bots.html" class="px-3 py-2 rounded-lg text-neon-primary transition-colors">The Bots</a>
        <a href="get-it.html" class="px-3 py-2 rounded-lg text-gray-100 hover:text-neon-primary transition-colors">Get It</a>
        <a href="play-it.html" class="px-3 py-2 rounded-lg text-gray-100 hover:text-neon-primary transition-colors">Play It</a>
        <a href="extend-it.html" class="px-3 py-2 rounded-lg text-gray-100 hover:text-neon-primary transition-colors">Extend It</a>
        <a href="share-it.html" class="px-3 py-2 rounded-lg text-gray-100 hover:text-neon-primary transition-colors">Share It</a>
        <a href="docs/index.html" class="px-3 py-2 rounded-lg text-gray-100 hover:text-neon-primary transition-colors">Docs</a>
        <a href="https://github.com/opensim-stack/opensim-ai-docker" target="_blank" rel="noopener" class="ml-2 px-4 py-2 rounded-lg bg-neon-primary text-white font-medium hover:bg-violet-500 transition-colors btn-glow">GitHub</a>
      </div>
      <button id="mobile-menu-btn" class="md:hidden p-2 rounded-lg text-gray-100 hover:bg-dark-700 transition-colors" aria-label="Toggle menu">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>
    <div id="mobile-menu" class="mobile-menu md:hidden border-t border-neon-primary/20 bg-dark-900/95 backdrop-blur">
      <div class="container mx-auto px-4 py-4 flex flex-col gap-2">
        <a href="index.html" class="px-4 py-2 rounded-lg text-gray-100 hover:bg-dark-700">Home</a>
        <a href="the-bots.html" class="px-4 py-2 rounded-lg text-gray-100 hover:bg-dark-700">The Bots</a>
        <a href="get-it.html" class="px-4 py-2 rounded-lg text-gray-100 hover:bg-dark-700">Get It</a>
        <a href="play-it.html" class="px-4 py-2 rounded-lg text-gray-100 hover:bg-dark-700">Play It</a>
        <a href="extend-it.html" class="px-4 py-2 rounded-lg text-gray-100 hover:bg-dark-700">Extend It</a>
        <a href="share-it.html" class="px-4 py-2 rounded-lg text-gray-100 hover:bg-dark-700">Share It</a>
        <a href="docs/index.html" class="px-4 py-2 rounded-lg text-gray-100 hover:bg-dark-700">Docs</a>
        <a href="https://github.com/opensim-stack/opensim-ai-docker" target="_blank" rel="noopener" class="px-4 py-2 rounded-lg bg-neon-primary text-white text-center">GitHub</a>
      </div>
    </div>
  </nav>

  <main class="pt-20">
    <section class="container mx-auto px-4 py-16 lg:py-24">
      <div class="max-w-6xl mx-auto">
        <div class="text-center mb-12 animate-on-scroll">
          <h1 class="text-4xl lg:text-6xl font-extrabold mb-4 text-white">The <span class="gradient-text neon-text">Bots</span></h1>
          <p class="text-lg text-gray-400">Meet your in-world AI assistants.</p>
        </div>

        <div class="space-y-6">
          <article class="bg-dark-800/80 backdrop-blur border border-neon-primary/20 p-6 lg:p-8 rounded-xl animate-on-scroll">
            <div class="grid md:grid-cols-4 gap-6 items-start">
              <div class="md:col-span-1 flex items-center justify-center">
                <div class="w-24 h-24 rounded-2xl bg-neon-primary/20 border border-neon-primary/40 flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-neon-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A4 4 0 016 10h1V8a5 5 0 1110 0v2h1a4 4 0 010 8H6.5" />
                  </svg>
                </div>
              </div>
              <div class="md:col-span-3">
                <h2 class="text-2xl lg:text-3xl font-bold text-white mb-2">The Governor</h2>
                <p class="text-gray-300 mb-4">The super user of your world: broad tool and system access, with safety prompts before destructive operations.</p>
                <ul class="space-y-2 text-gray-300">
                  <li class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-neon-primary mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 1.343-3 3s1.343 3 3 3 3-1.343 3-3-1.343-3-3-3z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33h.01a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51h.01a1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82v.01a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z" /></svg><span>Access to full toolchain, simulator console, files, and system-level capabilities.</span></li>
                  <li class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-neon-primary mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M5.07 19h13.86c1.54 0 2.5-1.67 1.73-3L13.73 4c-.77-1.33-2.69-1.33-3.46 0L3.34 16c-.77 1.33.19 3 1.73 3z" /></svg><span>Asks for explicit permission before destructive actions.</span></li>
                  <li class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-neon-primary mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /></svg><span>Can spawn Builder and Actor bots (but never another Governor).</span></li>
                </ul>
              </div>
            </div>
          </article>

          <article class="bg-dark-800/80 backdrop-blur border border-neon-secondary/20 p-6 lg:p-8 rounded-xl animate-on-scroll">
            <div class="grid md:grid-cols-4 gap-6 items-start">
              <div class="md:col-span-1 flex items-center justify-center">
                <div class="w-24 h-24 rounded-2xl bg-neon-secondary/20 border border-neon-secondary/40 flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-neon-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                  </svg>
                </div>
              </div>
              <div class="md:col-span-3">
                <h2 class="text-2xl lg:text-3xl font-bold text-white mb-2">The Builder</h2>
                <p class="text-gray-300 mb-4">Your practical in-world creator: almost everything a normal player can do, while still obeying world permissions.</p>
                <ul class="space-y-2 text-gray-300">
                  <li class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-neon-secondary mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5h2M5 11h14M7 19h10" /></svg><span>Can build, move, edit, and manage in-world content within normal permission rules.</span></li>
                  <li class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-neon-secondary mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7h18M5 7v10a2 2 0 002 2h10a2 2 0 002-2V7" /></svg><span>Has access to its own isolated workspace for files and automation artifacts.</span></li>
                  <li class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-neon-secondary mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /></svg><span>Can spawn Actor bots.</span></li>
                </ul>
              </div>
            </div>
          </article>

          <article class="bg-dark-800/80 backdrop-blur border border-neon-accent/20 p-6 lg:p-8 rounded-xl animate-on-scroll">
            <div class="grid md:grid-cols-4 gap-6 items-start">
              <div class="md:col-span-1 flex items-center justify-center">
                <div class="w-24 h-24 rounded-2xl bg-neon-accent/20 border border-neon-accent/40 flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-neon-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M12 3a9 9 0 100 18 9 9 0 000-18z" />
                  </svg>
                </div>
              </div>
              <div class="md:col-span-3">
                <h2 class="text-2xl lg:text-3xl font-bold text-white mb-2">The Actor</h2>
                <p class="text-gray-300 mb-4">A lightweight roleplay and interaction bot focused on presence, movement, and character behavior.</p>
                <ul class="space-y-2 text-gray-300">
                  <li class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-neon-accent mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg><span>Can move, navigate, and perform in-world avatar actions.</span></li>
                  <li class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-neon-accent mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14c3.866 0 7-2.239 7-5s-3.134-5-7-5-7 2.239-7 5 3.134 5 7 5z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10v4c0 2.761 3.134 5 7 5s7-2.239 7-5v-4" /></svg><span>Can change its own appearance.</span></li>
                  <li class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-neon-accent mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-1.414 1.414M6.343 17.657l-1.414 1.414M4 12h2m12 0h2M7.05 7.05L5.636 5.636m12.728 12.728l-1.414-1.414" /></svg><span>Cannot change the environment or create/edit prims.</span></li>
                </ul>
              </div>
            </div>
          </article>
        </div>

        <div class="bg-dark-800/80 backdrop-blur border border-green-500/20 p-6 lg:p-8 rounded-xl mt-8 animate-on-scroll">
          <h2 class="text-2xl font-bold mb-4 text-white">All Bots Can...</h2>
          <ul class="space-y-3 text-gray-300">
            <li class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-400 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A4 4 0 016 10h1V8a5 5 0 1110 0v2h1a4 4 0 010 8H6.5" /></svg><span>Have their own appearance.</span></li>
            <li class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-400 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" /></svg><span>Use their own specific AI provider or model.</span></li>
            <li class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-400 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-4.418 0-8 1.79-8 4v4h16v-4c0-2.21-3.582-4-8-4z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8V4" /></svg><span>Have custom prompts for rules, behavior, and personality.</span></li>
          </ul>
        </div>

        <div class="flex items-start gap-3 p-4 rounded-lg border border-orange-500/30 bg-orange-500/10 text-gray-100 mt-8 animate-on-scroll">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 text-orange-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
          </svg>
          <span><strong>Warning:</strong> prompts are not infallible. Malicious users can and will find ways to bypass prompt constraints. Treat prompts as one safety layer, not a complete security boundary.</span>
        </div>
      </div>
    </section>
  </main>

  <footer class="border-t border-neon-primary/20 bg-dark-800/50 backdrop-blur mt-12">
    <div class="container mx-auto px-4 py-8">
      <div class="flex flex-col md:flex-row items-center justify-between gap-4">
        <div class="flex items-center gap-3">
          <img src="opensim-stack.png" alt="OpenSim AI Stack" class="h-8 w-auto">
          <span class="font-bold gradient-text">OpenSim AI Stack</span>
        </div>
        <div class="flex gap-6 text-sm text-gray-400">
          <a href="https://github.com/opensim-stack/opensim-ai-docker" target="_blank" rel="noopener" class="hover:text-neon-primary transition-colors">GitHub</a>
          <a href="https://hub.docker.com/repository/docker/bithatch/opensim-ai-standalone/general" target="_blank" rel="noopener" class="hover:text-neon-primary transition-colors">Docker Hub</a>
          <a href="https://opensimulator.org/" target="_blank" rel="noopener" class="hover:text-neon-primary transition-colors">OpenSimulator</a>
        </div>
        <p class="text-sm text-gray-500">Experimental work in progress.</p>
      </div>
    </div>
  </footer>

  <script src="script.js"></script>
</body>
</html>