From 636b0323075225c584b62719ed51e75521bb7ffb Mon Sep 17 00:00:00 2001
From: aura <nw@moneybot.cc>
Date: Tue, 17 Feb 2026 22:39:42 +0100
Subject: push source

---
 moneyjsx/src/support-tutorial.tsx | 156 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 156 insertions(+)
 create mode 100644 moneyjsx/src/support-tutorial.tsx

(limited to 'moneyjsx/src/support-tutorial.tsx')

diff --git a/moneyjsx/src/support-tutorial.tsx b/moneyjsx/src/support-tutorial.tsx
new file mode 100644
index 0000000..a1d8a14
--- /dev/null
+++ b/moneyjsx/src/support-tutorial.tsx
@@ -0,0 +1,156 @@
+import $ from "jquery";
+import * as JSX from './jsx';
+
+import { Dropdown, DropdownItem, Page, GroupBox } from './components';
+
+interface TutorialPage {
+  title: string,
+  content: HTMLElement
+}
+
+const pages: TutorialPage[ ] = [
+  {
+    title: "Choosing the right model",
+    content:
+    <span>
+      It would get quite wordy if we were to discuss every model in detail that we provide,
+      so our best suggestion is to check out our <a onclick={ () => JSX.navigate( "/models" ) }>Models</a> page.
+      <br />
+      Here, you can see the various personalities our models come with by default,
+      the provided tooling, as well as licensing information for each respective model!
+    </span>
+  },
+  {
+    title: "Effective chatting",
+    content:
+    <span>
+      Effective chatting best practices are also, as with most things, on a model-by-model basis.
+      However, there are some good standards to abide by when interacting with any LLM to increase effectiveness.
+      We'll list a few of our personally notable ones here, in no particular order:
+      <div style="padding: 10px 10px 0;">
+        <b>1) Prompting :</b> A good prompt can drastically change the output of a large language model,
+                              effective prompts will be elaborated on in the <a onclick={ () => selectPage( pages[ 2 ] ) }>next</a> section.
+        <br /><br />
+        <b>2) Clarify :</b> As the saying "garbage in, garbage out" goes with computing, it continues here to an extraordinary extent.
+                            One of, if not, the most effective methods of improving LLM responses is by providing and continually improving:
+                            queries, instructions, sample code, or other data you feed into the language model that fits your current need.
+        <br /><br />
+        <b>3) Reminders :</b> LLMs, just like humans, need reminders sometimes. If you are sending large amounts of data, or
+                              if you are having a model make many web requests, it's very likely you will leave the model's
+                              context window. This can lead to unpredictable and unexplainable results, so do with that information
+                              what you will.
+        <br /><br />
+        <b>4) Tooling :</b> Luckily for you, utilizing our provided <a onclick={ () => selectPage( pages[ 4 ] ) }>tooling</a> is not something that you will have to initiate.
+                            Models equipped with tooling functionality will automatically use our provided tools to better complete your requests.
+                            All this being said, you will have to "manage" your tooling. For web requests, as mentioned above, they can quickly
+                            devour your avaiable context window and cause erroneous responses to occur. Notes as well, when above capacity, can
+                            cause the same. We do provide a way to manage notes, and we can only suggest to keep web requests to a minimum.
+      </div>
+    </span>
+  },
+  {
+    title: "Prompting",
+    content:
+    <span>
+      We feel like this cannot be understated, so we will mention it again.
+      Each model is different, and will respond differently to the same query, prompt, image, etc.
+      This is what we describe as "personalities".
+      <br />
+      However, as with chatting, we can provide general advice that applies across the board.
+      As well, we will attach some resources below that we have used in our journey in this process.
+      We feel these are of good quality and dig into a low level in layman's terms to help you
+      understand easily.
+      <br />
+      <div style="padding: 10px 10px 0;">
+        <b>1) Prompt format matters :</b> As seen in the resources below, there are many types of prompting.
+                                          Using the wrong style of prompt for the wrong purpose could hinder
+                                          service performance rather than improve it. Make sure you have a
+                                          rudimentary understanding of what prompting is and what it does before
+                                          embarking on your quest.
+        <br /><br />
+        <b>2) Prompt interferes with context window :</b> This is a good one to keep in mind. Though it will
+                                                          likely never be an issue for the average user, advanced
+                                                          power users may find a point in which a lengthy prompt
+                                                          causes a model to *only* output erroneous data. Keeping
+                                                          your prompt clear and concise should be the goal of any
+                                                          power user.
+        <br /><br />
+        <b>3) Test, test, and test again :</b> This is the most important step. The true essence of trial and error
+                                                is found here. Attempting different variations, structures, and wordings
+                                                of the same prompt can lead to vastly different outcomes, all coinciding
+                                                with the previously discussed points.
+      </div>
+      <br />
+      The aforementioned resources are as follows, in an order that we'd suggest approaching this topic with :
+      <div style="padding: 10px 10px 0;">
+        1) <a href="https://github.blog/ai-and-ml/generative-ai/prompt-engineering-guide-generative-ai-llms/" target="_blank">What is prompting</a>
+        <br />
+        2) <a href="https://github.com/tghurair/agentic-prompting/tree/main/techniques" target="_blank">Basic prompting examples</a>
+        <br />
+        3) <a href="https://www.promptingguide.ai/models" target="_blank">Model-specific prompting tips</a>
+      </div>
+    </span>
+  },
+  {
+    title: "Modules",
+    content:
+    <span>
+      Modules are a product that we offer outside of being a convenient host and frontend for a wide array of hand-picked open source LLMs.
+      They can be created using a fraction of our available <a onclick={ () => selectPage( pages[ 5 ] ) }>api</a>, and still create a lively environment for any
+      chatbot, website, video game dialog, or any other endeavour only the mind can uncover.
+      <br />
+      At the moment, our pricing for module implementation to your service starts at $250 USD, and of course goes up with project scope.
+    </span>
+  },
+  {
+    title: "Tools",
+    content:
+    <span>
+      To not repeat ourselves too much here, we'd suggest reading #4 of <a onclick={ () => selectPage( pages[ 1 ] ) }>effective chatting</a> before this portion.
+      <br /><br />
+      As stated there, our provided tooling is initiated automatically by the will of the selected model, but you are in charge
+      of managing its resource consumption. If you notice it taking a lot of notes, it will be worthwhile to clean out notes that
+      aren't so important. If your current conversation has a lot of web requests in it's history, it could prove resourceful to
+      start a new chat to initiate a new context window to refreshing the models "short-term memory", while carrying over useful
+      notes from past conversations. These nuanced tweaks will become frictionless and scale overtime to further hone in the model
+      to become tailored to you, the user.
+    </span>
+  },
+  {
+    title: "API",
+    content:
+    <span>
+      Our OpenAI-compatible API is the core that powers this entire site.
+      As you can see for yourself in the inspector, this site is written completely with an in-house framework.
+      None of the nonsense that plagues the modern industry. We understand the importance of simplicty.
+      What makes this all possible, outside of our ability to "Make It Work" as developers, is our robust API.
+
+      To dig deeper and become a power user, please visit <a onclick={ () => JSX.navigate( "/api" ) }>this</a> page.
+    </span>
+  }
+];
+
+let selected_page: TutorialPage = pages[ 0 ];
+export default function Tutorial() {
+  return <Page>
+    <GroupBox title="Tutorial" style="width: 85%; display: flex;">
+      <div id="page-selector-wrapper">
+        <Dropdown title={ selected_page.title } inline id="tutorial-links-box">
+          { pages.map( ( p ) => <DropdownItem onclick={ () => selectPage( p ) }> { p.title } </DropdownItem> ) }
+        </Dropdown>
+      </div>
+
+      <div class="tutorial-section">
+        <span id="tutorial-content">
+          { selected_page.content }
+        </span>
+      </div>
+    </GroupBox>
+  </Page>
+}
+
+function selectPage( page: TutorialPage ) {
+  selected_page = page;
+  $( "#tutorial-links-box" ).text( page.title ); // moneyjsx todo @nave : FIX PLEASE, I SHOULDN'T HAVE TO DO THIS ( IT'S BROKEN ON MODEL PAGE AS WELL ) -- intuitive functionality is that it rerenders when the selected_page var is modified
+  $( "#tutorial-content" ).html( page.content ); // if we could add a reactive body to that as well that responds when selection changed, we could remove this entire need for onclick, but that's also probably a fuck ton of work .
+}
-- 
cgit v1.2.3

