Skip to content

Commit

Permalink
feat: NewStory styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@motform
motform committed Oct 5, 2024
1 parent e7a59de commit 74dc47d
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 47 deletions.
32 changes: 25 additions & 7 deletions resources/public/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
*::before,
*::after {
box-sizing: border-box;
transition: all 200ms;
transition: all 150ms ease-out;
}

input,
Expand Down Expand Up @@ -189,6 +189,7 @@ textarea:hover {
textarea:focus {
background-color: var(--blurred-2);
border-color: var(--blurred-0);
box-shadow: 0 0 12px 2px var(--blurred-0);
}

.textarea-small {
Expand Down Expand Up @@ -221,6 +222,12 @@ textarea:focus {
align-items: center;
}

.full-width {
width: 100% !important;
max-width: 100% !important;
flex: 1 !important;
}

.center-flex {
justify-content: center;
}
Expand Down Expand Up @@ -562,7 +569,7 @@ textarea:focus {
}

.template-toggles {
align-self: flex-end;
align-self: flex-start;
background: var(--blurred-0);
border-radius: 99999px;
padding: 0 10px;
Expand Down Expand Up @@ -611,7 +618,8 @@ textarea:focus {

.template-tip {
width: 100%;
margin-bottom: 8px;
margin-block-start: -8px;
margin-block-end: 8px;
margin-inline: 16px;
font-size: 12px;
white-space: pre;
Expand All @@ -621,12 +629,20 @@ textarea:focus {

.new-story {
align-items: center;
max-width: 700px;
max-width: 1400px;
width: 100%
padding-block-start: 40px;
}

.prompt-container {
margin-inline: 16px;
}

.prompt {
padding-block-start: 24px;
display: grid;
padding-top: 24px;
grid-template-columns: 1fr 1fr;
gap: 24px;
}

.prompt-label {
Expand All @@ -635,11 +651,13 @@ textarea:focus {
sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--accent-30);
color: var(--accent-50);
margin-inline-start: 14px;
font-weight: 600;
}

.prompt-background {
width: 750px;
width: 100%;

border: 1px solid var(--blurred-border);
background: var(--blurred-0);
Expand Down
82 changes: 42 additions & 40 deletions src/org/motform/multiverse/components/new_story.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,11 @@
(defn PromptVersions []
(let [active @(rf/subscribe [:new-story/prompt-version])
Toggle (partial Toggle active :new-story/prompt-version)]
[:section.template-toggles.h-stack.gap-quarter
[Toggle :prompt/v1 "v1"]
[Toggle :prompt/v2 "v2"]]))
[: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])
Expand All @@ -41,48 +43,48 @@
user-message @(rf/subscribe [:new-story/user-message])
promt-version @(rf/subscribe [:new-story/prompt-version])
blank? (str/blank? prompt)]
[:section.prompt.prompt-background.v-stack.gap-full.rounded-large.shadow-large.pad-half

[:section.v-stack.gap-half
[:span.prompt-label "System Message"]
[:section.v-stack.gap-quarter
[:textarea#system-prompt.prompt-textarea.textarea-large.rounded.shadow-large.pad-half
{:value system-message
:rows 10
:disabled (= promt-version :prompt/v1)
:on-change #(rf/dispatch [:new-story/update :new-story/system-message (.. % -target -value)])}]
[:p.template-tip "The system message is the message that the AI will see before generating the story.\nOpenAI claims it is weighted more heavily than the user message."]]

[:span.prompt-label "User Message"]
[:section.v-stack.gap-quarter
[:textarea#system-prompt.prompt-textarea.textarea-large.rounded.shadow-large.pad-half
{:value user-message
:rows 4
:disabled (= promt-version :prompt/v1)
:on-change #(rf/dispatch [:new-story/update :new-story/user-message (.. % -target -value)])}]
[:p.template-tip "The user message is the last message the AI sees, after having been given the entire story up to this point."]]
[:div.prompt-container
[:section.prompt.prompt-background.v-stack.gap-full.rounded-large.shadow-large.pad-half
[:section.v-stack.gap-full.full-width
[:section.v-stack.gap-half
[:span.prompt-label "System Message"]
[:textarea#system-prompt.prompt-textarea.textarea-large.rounded.shadow-large.pad-half
{:value system-message
:rows 10
:disabled (= promt-version :prompt/v1)
:on-change #(rf/dispatch [:new-story/update :new-story/system-message (.. % -target -value)])}]
[:p.template-tip "The system message is the message that the AI will see before generating the story.\nOpenAI claims it is weighted more heavily than the user message."]]

[:section.v-stack.gap-half
[:span.prompt-label "User Message"]
[:textarea#system-prompt.prompt-textarea.textarea-large.rounded.shadow-large.pad-half
{:value user-message
:rows 6
:disabled (= promt-version :prompt/v1)
:on-change #(rf/dispatch [:new-story/update :new-story/user-message (.. % -target -value)])}]
[:p.template-tip "The user message is the last message the AI sees, after having been given the entire story up to this point."]]

[PromptVersions]]
[PromptVersions]]

[:section.v-stack.gap-half
[:span.prompt-label "Story Prompt"]
[:textarea#story-prompt.prompt-textarea.textarea-large.rounded.shadow-large.pad-half
{:value prompt
:rows 3
:auto-focus true
:on-change #(rf/dispatch [:new-story/update :new-story/prompt (.. % -target -value)])
:on-key-down #(when (and (or (.-metaKey %) (.-ctrlKey %))
(= (.-key %) "Enter"))
(submit-story))}]]
[:section.v-stack.gap-full.full-width
[:section.v-stack.gap-half
[:span.prompt-label "Story Prompt"]
[:textarea#story-prompt.prompt-textarea.textarea-large.rounded.shadow-large.pad-half
{:value prompt
:rows 4
:auto-focus true
:on-change #(rf/dispatch [:new-story/update :new-story/prompt (.. % -target -value)])
:on-key-down #(when (and (or (.-metaKey %) (.-ctrlKey %))
(= (.-key %) "Enter"))
(submit-story))}]]

[:section.h-stack.spaced {:style {:align-items "flex-end"}}
[Models]

[:section.h-stack.spaced {:style {:align-items "flex-end"}}
[Models]
[:button.rounded.shadow-medium.tab.prompt-button-submit.blurred
{:disabled blank?
:on-pointer-down #(when-not blank? (submit-story))}
"Explore"]]]))
[:button.rounded.shadow-medium.tab.prompt-button-submit.blurred
{:disabled blank?
:on-pointer-down #(when-not blank? (submit-story))}
"Explore"]]]]]))

(defn NewStory []
[:main.new-story.v-stack.gap-full
Expand Down

0 comments on commit 74dc47d

Please sign in to comment.