feat: User selection of ::open-ai/model

deps.edn

@@ -2,18 +2,19 @@
 
  :deps {bidi/bidi                  {:mvn/version "2.1.6"}
         binaryage/devtools         {:mvn/version "1.0.7"}
-        cider/cider-nrepl          {:mvn/version "0.43.3"}
+        cider/cider-nrepl          {:mvn/version "0.50.2"}
         clj-commons/pushy          {:mvn/version "0.3.10"}
         cljsjs/d3                  {:mvn/version "7.6.1-0"}
         day8.re-frame/http-fx      {:mvn/version "0.2.4"}
         day8.re-frame/re-frame-10x {:mvn/version "1.8.1"}
         day8.re-frame/tracing      {:mvn/version "0.6.2"}
         nano-id/nano-id            {:mvn/version "1.0.0"}
         org.clojure/core.async     {:mvn/version "1.6.681"}
+        org.clojure/clojure        {:mvn/version "1.12.0"}
         re-frame/re-frame          {:mvn/version "1.4.0"}
         reagent/reagent            {:mvn/version "1.2.0"}
-        thheller/shadow-cljs       {:mvn/version "2.26.2"}}
+        thheller/shadow-cljs       {:mvn/version "2.28.16"}}
 
  :aliases {:shadow-cljs
-           {:extra-deps {thheller/shadow-cljs {:mvn/version "2.26.2"}}
+           {:extra-deps {thheller/shadow-cljs {:mvn/version "2.28.16"}}
             :main-opts ["-m" "shadow.cljs.devtools.cli"]}}}

resources/public/css/style.css

@@ -59,6 +59,18 @@ body {
   }
 }
 
+dialog {
+  background-color: var(--blurred-0);
+  padding: unset;
+  border: none;
+  border-radius: 24px;
+}
+
+dialog::backdrop {
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
+}
+
 a {
   color: var(--fg);
   text-decoration: none;
@@ -560,6 +572,13 @@ textarea:focus {
   padding: 0 10px;
 }
 
+.toggle-label {
+  color: var(--accent-30);
+  text-transform: uppercase;
+  font-size: 12px;
+  margin-inline-start: 14px;
+}
+
 .template-toggle {
   border-radius: 9999px;
   background-color: transparent;
@@ -606,7 +625,6 @@ textarea:focus {
 }
 
 .prompt-background {
-  margin: 0 40px;
   width: 750px;
 
   border: 1px solid var(--blurred-border);

src/org/motform/multiverse/components/header.cljs

@@ -22,7 +22,7 @@
                     (or @*visible? active?))
            [:label.tab-label
             {:class (when (and @*visible? (not active?)) "tab-label-inactive")}
-            "Add literary space"])]))))
+            "Add new story"])]))))
 
 (defn Tab [{:story/keys [title id]} active-story-id active-page]
   [:div.tab.shadow-medium.tooltip-container.blurred

src/org/motform/multiverse/components/library.cljs

@@ -54,7 +54,7 @@
 (defn Empty []
   [:section>p "The Library is empty, go" [:br]
    [:a {:href (routes/url-for :page/new-story)} "explore"]
-   " a literary space."])
+   " a new story."])
 
 (defn Library []
   [:main.library.v-stack.gap-double.pad-half

src/org/motform/multiverse/components/new_story.cljs

@@ -1,27 +1,41 @@
 (ns org.motform.multiverse.components.new-story
   (:require
     [clojure.string :as str]
-    [org.motform.multiverse.icon :as icon]
+    [org.motform.multiverse.open-ai :as-alias open-ai]
     [org.motform.multiverse.routes :as routes]
     [re-frame.core :as rf]))
 
-(defn TemplateToggle [active icon template tooltip]
+(defn Toggle [active db-key value label]
   [:div.template-toggle.tooltip-container
-   {:on-pointer-down #(rf/dispatch [:new-story/template template])
-    :class (when (= active template) "template-toggle-active shadow-small")}
-   [icon]
-   [:span.tooltip.rounded.shadow-small.tooltip-new-story
-    tooltip]])
+   {:on-pointer-down #(rf/dispatch [db-key value])
+    :class (when (= active value) "template-toggle-active shadow-small")}
+   label
+   #_[:span.tooltip.rounded.shadow-small.tooltip-new-story
+    label]])
 
-(defn Templates []
-  (let [active-template @(rf/subscribe [:new-story/template])
-        toggle (partial TemplateToggle active-template)]
-    [:section.template-toggles.h-stack.gap-quarter
-     [toggle icon/file     :template/blank   "Blank"]
-     [toggle icon/building :template/urban   "Urban experience"]
-     [toggle icon/boombox  :template/musical "Musical"]
-     [toggle icon/news     :template/news    "Newsworthy"]
-     [toggle icon/cpu      :template/ai      "AI co-existance"]]))
+(defn Models []
+  (let [active @(rf/subscribe [:new-story/model])
+        Toggle (partial Toggle active :new-story/model)]
+    [:section.v-stack.gap-quarter
+     [:span.toggle-label "GPT"]
+     [:section.template-toggles.h-stack.gap-quarter
+      [Toggle ::open-ai/gpt-3.5-turbo "3.5"]
+      [Toggle ::open-ai/gpt-4o-2024-08-06 "4o"]]]))
+
+(defn PromptVersions []
+  (let [active @(rf/subscribe [:new-story/prompt-version])
+        Toggle (partial Toggle active :new-story/prompt-version)]
+    [:section.v-stack.gap-quarter
+     [:span.toggle-label "Prompt"]
+     [:section.template-toggles.h-stack.gap-quarter
+      [Toggle :prompt/v1 "v1"]
+      [Toggle :prompt/v2 "v2"]]]))
+
+(defn submit-story []
+  (rf/dispatch [:new-story/submit])
+  (rf/dispatch [:page/active :page/story])
+  (. (.-history js/window)
+     pushState #js {} "" (routes/url-for :page/story)))
 
 (defn Prompt []
   (let [prompt @(rf/subscribe [:new-story/prompt])
@@ -30,24 +44,19 @@
      [:textarea#prompt-textarea.textarea-large.rounded.shadow-large.pad-half
       {:value prompt
        :auto-focus true
-       :on-change #(rf/dispatch [:new-story/update-prompt (.. % -target -value)])}]
-     [:section.h-stack.spaced
-      [Templates]
+       :on-change #(rf/dispatch [:new-story/update-prompt (.. % -target -value)])
+       :on-key-down #(when (and (or (.-metaKey %) (.-ctrlKey %))
+                                (= (.-key %) "Enter"))
+                       (submit-story))}]
+     [:section.h-stack.spaced {:style {:align-items "flex-end"}}
+      [:section.h-stack.gap-half
+       [Models]
+       [PromptVersions]]
       [:button.rounded.shadow-medium.tab.prompt-button-submit.blurred
        {:disabled blank?
-        :on-pointer-down #(when (not blank?)
-                            (rf/dispatch [:new-story/submit]) ; TODO move into route controller
-                            (rf/dispatch [:page/active :page/story])
-                            (. (.-history js/window) pushState #js {} "" (routes/url-for :page/story)))} ; TODO move into routing
+        :on-pointer-down #(when-not blank? (submit-story))}
        "Explore"]]]))
 
 (defn NewStory []
   [:main.new-story.v-stack.gap-full
-   [:div.gap-half.landing-blurb.v-stack
-    [:h3 "Literary style"]
-    [:p "The style affects the direction that the exploration is taking by nudging the algorithm. Don't think too hard about it, you can change style at any point."]]
-   [:div.gap-half.landing-blurb.v-stack
-    [:h3 "Story prompt"]
-    [:p "The prompt serves as a root from which all other points in the literary space will branch. Language models, despite being trained on massive data sets of text, always require something to instagate the generative process. Experiment with points of view, given names or even pop-cultural references."]]
-   [Prompt]
-   [:p.template-tip "Start with a blank slate or a template."]])
+   [Prompt]])

src/org/motform/multiverse/db.cljs

@@ -1,6 +1,7 @@
 (ns org.motform.multiverse.db
   (:require
     [cljs.reader :as reader]
+    [org.motform.multiverse.open-ai :as-alias open-ai]
     [re-frame.core :as rf]))
 
 ;; We store sentences as tree implemented by as an indexed map.
@@ -22,7 +23,8 @@
    :db/state
    {:page/active              :page/landing
     :new-story/prompt         ""
-    :new-story/template       :template/blank
+    :new-story/prompt-version :prompt/v1 ; :prompt/v1, :prompt/v2
+    :new-story/model          ::open-ai/gpt-3.5-turbo ; ::open-ai/gpt-4o
     :story/active             nil
     :story/recent             []
     :sentence/active          nil
@@ -52,13 +54,12 @@
      (select-keys (get-in db [:db/stories story-id :story/sentences])
                   (get-in db [:db/stories story-id :story/sentences parent-id :sentence/children])))))
 
-(defn completion-meta [db]
-  (let [story-id  (get-in db [:db/state :story/active])
-        parent-id (get-in db [:db/stories story-id :story/meta :sentence/active])
-        api-key   (get-in db [:db/state :open-ai/key :open-ai/api-key])]
+(defn request-data [db]
+  (let [story-id  (get-in db [:db/state :story/active])]
     {:story-id  story-id
-     :parent-id parent-id
-     :api-key   api-key}))
+     :parent-id (get-in db [:db/stories story-id :story/meta :sentence/active])
+     :api-key   (get-in db [:db/state :open-ai/key :open-ai/api-key])
+     :model     (get-in db [:db/stories story-id :story/meta :story/model])}))
 
 (defn paragraph [db story-id sentence-id]
   (reduce