diff options
Diffstat (limited to 'moneyjsx/src/support-tutorial.tsx')
| -rw-r--r-- | moneyjsx/src/support-tutorial.tsx | 156 |
1 files changed, 156 insertions, 0 deletions
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 . +} |