chore(docs): prompt controller

distantmagic · Feb 16, 2024 · 70a9427 · 70a9427
1 parent 594173e
commit 70a9427
Show file tree

Hide file tree

Showing 6 changed files with 155 additions and 6 deletions.
diff --git a/app/Template/StaticPageLayout/Turbo.php b/app/Template/StaticPageLayout/Turbo.php
@@ -169,7 +169,13 @@ protected function renderMeta(StaticPage $staticPage): Generator
      */
     protected function renderPrimaryBanner(StaticPage $currentPage): Generator
     {
-        yield <<<'HTML'
+        $promptSubjectResponderHref = $this
+            ->staticPages
+            ->get('docs/features/ai/prompt-subject-responders/index')
+            ->getHref()
+        ;
+
+        yield <<<HTML
             <div class="primary-banner">
                 <iframe
                     frameborder="0"
@@ -180,6 +186,10 @@ protected function renderPrimaryBanner(StaticPage $currentPage): Generator
                     title="GitHub"
                     width="130"
                 ></iframe>
+                <a href="{$promptSubjectResponderHref}">
+                    New Feature:
+                    Respond to natural language prompts with LLM Controllers
+                </a>
             </div>
         HTML;
     }

diff --git a/docs/pages/docs/features/ai/prompt-subject-responders/index.md b/docs/pages/docs/features/ai/prompt-subject-responders/index.md
@@ -0,0 +1,71 @@
+---
+collections: 
+    - documents
+layout: dm:document
+parent: docs/features/ai/index
+title: Prompt Subject Responders
+description: >
+    Handle HTTP requests with asynchronous HTTP Responders. 
+---
+
+# Prompt Subject Responders
+
+:::note
+At the moment this feature requires {{docs/features/ai/server/llama-cpp/index}}.
+
+In the future releases we plan to support [Ollama](https://ollama.com/).
+:::
+
+This feature allows to implement a convenient LLM Chat Controllers that can
+provide responses to LLM prompts on specific topics. 
+
+It automatically prepares both the system prompt and
+[Backus–Naur form](https://en.wikipedia.org/wiki/Backus%E2%80%93Naur_form) 
+grammar that are forwarded to the LLM through 
+{{docs/features/ai/server/llama-cpp/index}}.
+
+# Usage
+
+Let's define the following LLM prompt controller:
+
+```php
+<?php
+
+namespace App\PromptSubjectResponder;
+
+use Distantmagic\Resonance\Attribute\RespondsToPromptSubject;
+use Distantmagic\Resonance\Attribute\Singleton;
+use Distantmagic\Resonance\PromptSubjectRequest;
+use Distantmagic\Resonance\PromptSubjectResponderInterface;
+use Distantmagic\Resonance\PromptSubjectResponse;
+use Distantmagic\Resonance\SingletonCollection;
+
+#[RespondsToPromptSubject(
+    action: 'adopt',
+    subject: 'cat',
+)]
+#[Singleton(collection: SingletonCollection::PromptSubjectResponder)]
+readonly class CatAdopt implements PromptSubjectResponderInterface
+{
+    public function respondToPromptSubject(PromptSubjectRequest $request, PromptSubjectResponse $response): void
+    {
+        $response->write("Here you go:\n\n");
+        $response->write("   |\_._/|\n");
+        $response->write("   | o o |\n");
+        $response->write("   (  T  )\n");
+        $response->write("  .^`-^-`^.\n");
+        $response->write("  `.  ;  .`\n");
+        $response->write("  | | | | |\n");
+        $response->write(" ((_((|))_))\n");
+        $response->end();
+    }
+}
+```
+
+Each time user mentions something like:
+- `I want to adopt a cat`
+- `Give me some kittens please`
+- etc
+
+That questions will be forwarded to the above controller. All you need to do is
+to specify the `action` and `subject` parameters.
diff --git a/docs/pages/docs/features/ai/server/llama-cpp/index.md b/docs/pages/docs/features/ai/server/llama-cpp/index.md
@@ -8,7 +8,7 @@ description: >
     Use Resonance to connect with llama.cpp server.
 ---
 
-## llama.cpp
+# llama.cpp
 
 [llama.cpp](https://github.com/ggerganov/llama.cpp) is an open source framework
 capable of running various LLM models.

diff --git a/docs/pages/index.md b/docs/pages/index.md
@@ -36,6 +36,52 @@ description: >
             </a>
         </hgroup>
         <ul class="homepage__examples">
+            <li class="formatted-content homepage__example">
+                <h2 class="homepage__example__title">
+                    Chat with Open-Source LLMs
+                </h2>
+                <div class="homepage__example__description">
+                    <p>
+                        Integrate your application with self-hosted open-source 
+                        LLMs.
+                    </p>
+                    <p>
+                        Use your own Machine Learning models in production.
+                    </p>
+                    <a 
+                        class="homepage__cta homepage__cta--example"
+                        href="/docs/features/ai/"
+                    >
+                        Learn More
+                    </a>
+                </div>
+                <pre class="homepage__example__code fenced-code"><code 
+                        class="language-php"
+                        data-controller="hljs"
+                        data-hljs-language-value="php"
+                    >#[RespondsToPromptSubject(
+    action: 'adopt',
+    subject: 'cat',
+)]
+#[Singleton(collection: SingletonCollection::PromptSubjectResponder)]
+readonly class CatAdopt implements PromptSubjectResponderInterface
+{
+    public function respondToPromptSubject(PromptSubjectRequest $request, PromptSubjectResponse $response): void
+    {
+        // Pipes message through WebSocket... 
+
+        $response->write("Here you go:\n\n");
+        $response->write("   |\_._/|\n");
+        $response->write("   | o o |\n");
+        $response->write("   (  T  )\n");
+        $response->write("  .^`-^-`^.\n");
+        $response->write("  `.  ;  .`\n");
+        $response->write("  | | | | |\n");
+        $response->write(" ((_((|))_))\n");
+        $response->end();
+    }
+}</code></pre>
+            </li>
             <li class="formatted-content homepage__example">
                 <h2 class="homepage__example__title">
                     Artificial Intelligence

diff --git a/resources/css/docs-common.css b/resources/css/docs-common.css
@@ -10,7 +10,8 @@
   --color-inline-code-background: #0080ff30;
   --color-link-active: #ffc000;
   --color-link-decoration: var(--color-link-active);
-  --color-primary-banner-background: var(--color-body-background);
+  --color-primary-banner-background: var(--color-body-font);
+  --color-primary-banner-font: var(--color-body-background);
   --color-primary-footer-background: var(--color-body-background);
   --color-primary-navigation-background: var(--color-body-background);
   --color-text-decoration-highlight: var(--color-body-font);
@@ -158,13 +159,22 @@ a:active,
 .primary-banner {
   align-items: center;
   background-color: var(--color-primary-banner-background);
+  color: var(--color-primary-banner-font);
   border-bottom: 1px solid var(--color-border);
   display: flex;
   padding: 20px;
   position: sticky;
   top: 0;
 }
 
+.primary-banner > a {
+  text-decoration: none;
+}
+
+.primary-banner__new {
+  display: inline-flex;
+}
+
 /**
  * Primary footer
  */

diff --git a/resources/css/docs-page-homepage.css b/resources/css/docs-page-homepage.css
@@ -21,8 +21,14 @@
   flex-direction: column;
   max-width: 1480px;
   padding: 0 20px 160px 20px;
-  row-gap: 120px;
   width: 100%;
+
+  @media screen and (max-width: 1023px) {
+    row-gap: 20px;
+  }
+  @media screen and (min-width: 1024px) {
+    row-gap: 120px;
+  }
 }
 
 .homepage__example {
@@ -69,7 +75,13 @@ h2.homepage__example__title {
 .homepage__examples {
   display: flex;
   flex-direction: column;
-  row-gap: 160px;
+
+  @media screen and (max-width: 1023px) {
+    row-gap: 80px;
+  }
+  @media screen and (min-width: 1024px) {
+    row-gap: 160px;
+  }
 }
 
 .homepage__title {
@@ -125,7 +137,7 @@ h2.homepage__example__title {
   line-height: 1;
 
   @media screen and (max-width: 1023px) {
-    font-size: 3.5em;
+    font-size: 60px;
   }
   @media screen and (min-width: 1024px) {
     font-size: 8em;