<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="script.js"></script>
<title>CogServer WebSocket Demo</title>
<style>
body {
font-family: monospace;
margin: 20px;
line-height: 1.6;
}
h1, h2, h3 {
font-family: monospace;
}
h1 {
border-bottom: 2px solid #333;
padding-bottom: 10px;
}
h2 {
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
margin-top: 30px;
}
h3 {
color: #333;
margin-top: 20px;
}
pre {
background: #f0f0f0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
overflow-x: auto;
}
.connection-panel {
background: #f8f8f8;
padding: 15px;
border: 1px solid #ddd;
border-radius: 4px;
margin: 20px 0;
}
.connection-panel input[type="text"] {
font-family: monospace;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
width: 300px;
}
.connection-panel select {
font-family: monospace;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
.connection-panel input[type="button"] {
font-family: monospace;
padding: 5px 15px;
background: #007bff;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
margin-top: 10px;
}
.connection-panel input[type="button"]:hover {
background: #0056b3;
}
.status-line {
margin: 5px 0;
padding: 5px;
background: white;
border-left: 3px solid #007bff;
padding-left: 10px;
}
#connection {
font-weight: bold;
color: #d9534f;
}
#connection.connected {
color: #5cb85c;
}
#endpoint, #full-url {
font-weight: bold;
color: #333;
}
#reply {
display: block;
margin-top: 5px;
padding: 10px;
background: #f0f0f0;
border: 1px solid #ccc;
border-radius: 3px;
min-height: 40px;
white-space: pre-wrap;
word-wrap: break-word;
font-family: monospace;
}
table {
border-collapse: collapse;
margin: 15px 0;
width: 100%;
}
table td {
padding: 8px;
border: 1px solid #ddd;
vertical-align: top;
}
table td:first-child {
background: #f8f8f8;
width: 25%;
font-weight: bold;
}
table td:nth-child(2) {
width: 60%;
}
table td:last-child {
width: 15%;
text-align: center;
}
table tt {
background: #fff;
padding: 2px 4px;
border: 1px solid #e0e0e0;
border-radius: 3px;
display: inline-block;
margin: 2px 0;
}
.run-btn {
font-family: monospace;
padding: 4px 10px;
background: #28a745;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
}
.run-btn:hover {
background: #218838;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
hr {
border: none;
border-top: 1px solid #ccc;
margin: 40px 0;
}
.intro-section {
background: #f9f9f9;
padding: 15px;
border-left: 4px solid #5bc0de;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>CogServer WebSocket Demo</h1>
<div class="intro-section">
<p>You can interact with a running CogServer with this web page.
Be sure to start a cogserver first! Try running it either from
the command line:</p>
<pre>
$ /usr/local/bin/cogserver
</pre>
<p>or from guile:</p>
<pre>
$ guile
> (use-modules (opencog) (opencog cogserver))
> (start-cogserver)
</pre>
<p>or from python:</p>
<pre>
$ python3
> import opencog, opencog.cogserver
> opencog.cogserver.startCogserver()
</pre>
<p>Take a moment to visit the stats page at
<a href="stats">the stats page</a>.</p>
</div>
<h2>Interact</h2>
<p>
You can interact with the websockets server below. There
are four styles of interaction: JSON, Scheme, Python and
bare s-expressions. Select the interaction mode and hit
the "Connect" button. Change the mode by disconnecting and
reconnecting.
</p>
<div class="connection-panel">
<noscript>
<div style="color: red; font-weight: bold; padding: 10px; background: #ffe6e6; border: 2px solid red; border-radius: 4px; margin-bottom: 15px;">
Please enable javascript in your browser to run this demo!
</div>
</noscript>
<div class="status-line">
<label>CogServer: <input type="text" id="server-box"></label>
</div>
<div class="status-line">
<label>Endpoint:
<select id="endpoint-menu">
<option value="json">JSON</option>
<option value="scm">Scheme</option>
<option value="py">Python</option>
<option value="sexpr">S-Expressions</option>
</select>
</label>
</div>
<div class="status-line">
Connected to server: <span id="connection">false</span>
</div>
<input type="button" id="connectButton" value="Connect">
<hr style="margin: 15px 0;">
<p style="margin: 10px 0;">Type a command message in the text box, and then hit "enter".
Some suggested messages are just below.</p>
<div class="status-line">
Connection Type: <span id="endpoint">none</span>
</div>
<div class="status-line">
CogServer URL: <span id="full-url">none</span>
</div>
<div class="status-line">
<label style="display: flex; align-items: flex-start;">
<span style="margin-right: 10px; margin-top: 5px;">Command:</span>
<textarea id="outgoing" style="flex: 1; font-family: monospace; padding: 5px; border: 1px solid #ccc; border-radius: 3px; min-height: 60px; resize: vertical;"></textarea>
</label>
</div>
<div class="status-line">
<label style="display: block;">CogServer Reply:</label>
<span id="reply"></span>
</div>
</div>
<h2>Suggested Messages</h2>
<p>Try sending these messages:</p>
<h3>JSON</h3>
The /json endpoint supports fifteen different commands for creating
Atoms and Values, executing them, fetching them and so on. The
reply messages are all formatted in JSON style.
See the <a href="https://github.com/opencog/atomspace-storage/tree/master/opencog/persist/json">JSON README</a>
for full documentation.
<table>
<tr><td>JSON API Version:</td>
<td><tt>AtomSpace.version()</tt></td>
<td><button class="run-btn" onclick="runCommand('AtomSpace.version()', 'json')">Run this</button></td></tr>
<tr><td>Create a ConceptNode:</td>
<td><tt>AtomSpace.makeAtom({"type": "Concept", "name": "foo"})</tt></td>
<td><button class="run-btn" onclick='runCommand("AtomSpace.makeAtom({\"type\": \"Concept\", \"name\": \"foo\"})", "json")'>Run this</button></td></tr>
<tr><td>Fetch all Atoms:</td>
<td><tt>AtomSpace.getAtoms("Atom", true)</tt></td>
<td><button class="run-btn" onclick='runCommand("AtomSpace.getAtoms(\"Atom\", true)", "json")'>Run this</button></td></tr>
<tr><td>Fetch all Atom Types:</td>
<td><tt>AtomSpace.getSubTypes("TopType", true)</tt></td>
<td><button class="run-btn" onclick='runCommand("AtomSpace.getSubTypes(\"TopType\", true)", "json")'>Run this</button></td></tr>
</table>
<h3>Scheme</h3>
The /scm endpoint is connected to an instance of the guile REPL
shell. It runs all valid guile scheme expressions.
See the <a href="https://wiki.opencog.org/w/Scheme">OpenCog Wiki</a>
for full documentation.
<table>
<tr><td>Sanity check:</td>
<td><tt>(+ 2 2)</tt></td>
<td><button class="run-btn" onclick="runCommand('(+ 2 2)', 'scm')">Run this</button></td></tr>
<tr><td>Hello, World!</td>
<td><tt>(display "Hello, World!\n")</tt></td>
<td><button class="run-btn" onclick='runCommand("(display \"Hello, World!\\n\")", "scm")'>Run this</button></td></tr>
<tr><td>Create a ConceptNode:</td>
<td><tt>(Concept "bar")</tt></td>
<td><button class="run-btn" onclick='runCommand("(Concept \"bar\")", "scm")'>Run this</button></td></tr>
<tr><td>Fetch all Atoms:</td>
<td><tt>(cog-get-atoms 'Atom #t)</tt></td>
<td><button class="run-btn" onclick="runCommand('(cog-get-atoms \'Atom #t)', 'scm')">Run this</button></td></tr>
<tr><td>Print a Summary report:</td>
<td><tt>(cog-report-counts)</tt></td>
<td><button class="run-btn" onclick="runCommand('(cog-report-counts)', 'scm')">Run this</button></td></tr>
</table>
<h3>S-Expressions</h3>
The /sexpr endpoint provides a custom set of fifteen commands
Atoms and Values, executing them, fetching them and so on. The
command names are identical to the equivalent Scheme API, commands
except that these are written to run extremely fast.
This endpoint is designed for high-throughput. Syntax errors fail
silently, and many successful commands do not return anything!
See the <a href="https://github.com/opencog/atomspace-storage/tree/master/opencog/persist/sexpr">Sexpr README</a>
for full documentation.
<table>
<tr><td>AtomSpace Version:</td>
<td><tt>(cog-version)</tt></td>
<td><button class="run-btn" onclick="runCommand('(cog-version)', 'sexpr')">Run this</button></td></tr>
<tr><td>Create a ConceptNode:</td>
<td><tt>(cog-set-value! (Concept "zinger") (Predicate "ignore") #f)</tt></td>
<td><button class="run-btn" onclick='runCommand("(cog-set-value! (Concept \"zinger\") (Predicate \"ignore\") #f)", "sexpr")'>Run this</button></td></tr>
<tr><td>Fetch all Atoms:</td>
<td><tt>(cog-get-atoms 'Atom #t)</tt></td>
<td><button class="run-btn" onclick="runCommand('(cog-get-atoms \'Atom #t)', 'sexpr')">Run this</button></td></tr>
<tr><td>Set a value on an Atom:</td>
<td><tt>(cog-set-value! (Concept "foo") (Predicate "key") (FloatValue 1 2 3))</tt></td>
<td><button class="run-btn" onclick='runCommand("(cog-set-value! (Concept \"foo\") (Predicate \"key\") (FloatValue 1 2 3))", "sexpr")'>Run this</button></td></tr>
<tr><td>Get a value on an Atom:</td>
<td><tt>(cog-value (Concept "foo") (Predicate "key"))</tt></td>
<td><button class="run-btn" onclick='runCommand("(cog-value (Concept \"foo\") (Predicate \"key\"))", "sexpr")'>Run this</button></td></tr>
</table>
<h3>Python</h3>
The /py endpoint is attached to a full Python3 REPL shell. It accepts
and will run all valid Python3 expressions. Note that most python
expressions produce no output, and so running this demo can be
a bit confusing. The default Python3 REPL does NOT import any of
OpenCog python modules; you have to import them yourself.
See the <a href="https://wiki.opencog.org/w/Python">OpenCog Wiki</a>
for full documentation.
<p>
The <a href="json-test.html">JSON Test page</a> displays the network
traffic for some of the commands below.</p>
<table>
<tr><td>Hello, World!</td>
<td><tt>print("Hello, World!\n")</tt></td>
<td><button class="run-btn" onclick='runCommand("print(\"Hello, World!\\n\")", "py")'>Run this</button></td></tr>
<tr><td>Python initialization:</td>
<td><tt>from opencog.atomspace import *<br>
from opencog.type_constructors import *</tt></td>
<td><button class="run-btn" onclick='runCommand("from opencog.atomspace import *\nfrom opencog.type_constructors import *\n", "py")'>Run this</button></td></tr>
<tr><td>Create a ConceptNode:</td>
<td><tt>cc = Concept("py thing")<br>
print("Created this:", cc)</tt></td>
<td><button class="run-btn" onclick='runCommand("cc = Concept(\"py thing\")\nprint(\"Created this:\", cc)", "py")'>Run this</button></td></tr>
<tr><td>Fetch all Atoms:</td>
<td><tt>spacey = get_thread_atomspace()<br>
all = spacey.get_atoms_by_type(types.Atom, True)<br>
print("All of them", all)</tt></td>
<td><button class="run-btn" onclick='runCommand("spacey = get_thread_atomspace()\nall = spacey.get_atoms_by_type(types.Atom, True)\nprint(\"All of them\", all)", "py")'>Run this</button></td></tr>
</table>
<hr>
<h3>The End</h3>
</body>
</html>