jbilcke-hf HF staff commited on
Commit
aa15a35
β€’
1 Parent(s): d3acf1b

use a generate button

Browse files
src/app/interface/top-menu/index.tsx CHANGED
@@ -15,6 +15,7 @@ import { FontName, fontList, fonts } from "@/lib/fonts"
15
  import { Input } from "@/components/ui/input"
16
  import { defaultPreset, getPreset, presets } from "@/app/engine/presets"
17
  import { useStore } from "@/app/store"
 
18
 
19
  export function TopMenu() {
20
  const font = useStore(state => state.font)
@@ -26,7 +27,9 @@ export function TopMenu() {
26
  const prompt = useStore(state => state.prompt)
27
  const setPrompt = useStore(state => state.setPrompt)
28
 
 
29
  const atLeastOnePanelIsBusy = useStore(state => state.atLeastOnePanelIsBusy)
 
30
 
31
  const [draft, setDraft] = useState("")
32
  return (
@@ -48,7 +51,7 @@ export function TopMenu() {
48
  <Select
49
  defaultValue={defaultPreset}
50
  onValueChange={(value) => { setPreset(getPreset(value as FontName)) }}
51
- disabled={atLeastOnePanelIsBusy}
52
  >
53
  <SelectTrigger className="flex-grow">
54
  <SelectValue className="text-sm" placeholder="Type" />
@@ -97,13 +100,6 @@ export function TopMenu() {
97
  onChange={(e) => {
98
  setDraft(e.target.value)
99
  }}
100
- onBlur={(e) => {
101
- if (draft !== prompt) {
102
- if (draft.trim() !== prompt.trim()) {
103
- setPrompt(draft.trim())
104
- }
105
- }
106
- }}
107
  onKeyDown={({ key }) => {
108
  if (key === 'Enter') {
109
  if (draft.trim() !== prompt.trim()) {
@@ -113,6 +109,16 @@ export function TopMenu() {
113
  }}
114
  value={draft}
115
  />
 
 
 
 
 
 
 
 
 
 
116
  </div>
117
  <div className={cn(
118
  `transition-all duration-200 ease-in-out`,
@@ -122,7 +128,7 @@ export function TopMenu() {
122
  <Select
123
  defaultValue={fontList.includes(preset.font) ? preset.font : "actionman"}
124
  onValueChange={(value) => { setFont(value as FontName) }}
125
- // disabled={atLeastOnePanelIsBusy}
126
  disabled={true}
127
  >
128
  <SelectTrigger className="flex-grow">
 
15
  import { Input } from "@/components/ui/input"
16
  import { defaultPreset, getPreset, presets } from "@/app/engine/presets"
17
  import { useStore } from "@/app/store"
18
+ import { Button } from "@/components/ui/button"
19
 
20
  export function TopMenu() {
21
  const font = useStore(state => state.font)
 
27
  const prompt = useStore(state => state.prompt)
28
  const setPrompt = useStore(state => state.setPrompt)
29
 
30
+ const isGeneratingStory = useStore(state => state.isGeneratingStory)
31
  const atLeastOnePanelIsBusy = useStore(state => state.atLeastOnePanelIsBusy)
32
+ const isBusy = isGeneratingStory || atLeastOnePanelIsBusy
33
 
34
  const [draft, setDraft] = useState("")
35
  return (
 
51
  <Select
52
  defaultValue={defaultPreset}
53
  onValueChange={(value) => { setPreset(getPreset(value as FontName)) }}
54
+ disabled={isBusy}
55
  >
56
  <SelectTrigger className="flex-grow">
57
  <SelectValue className="text-sm" placeholder="Type" />
 
100
  onChange={(e) => {
101
  setDraft(e.target.value)
102
  }}
 
 
 
 
 
 
 
103
  onKeyDown={({ key }) => {
104
  if (key === 'Enter') {
105
  if (draft.trim() !== prompt.trim()) {
 
109
  }}
110
  value={draft}
111
  />
112
+ <Button
113
+ onClick={() => {
114
+ if (draft.trim() !== prompt.trim()) {
115
+ setPrompt(draft.trim())
116
+ }
117
+ }}
118
+ disabled={!draft?.trim().length || isBusy}
119
+ >
120
+ Generate
121
+ </Button>
122
  </div>
123
  <div className={cn(
124
  `transition-all duration-200 ease-in-out`,
 
128
  <Select
129
  defaultValue={fontList.includes(preset.font) ? preset.font : "actionman"}
130
  onValueChange={(value) => { setFont(value as FontName) }}
131
+ // disabled={isBusy}
132
  disabled={true}
133
  >
134
  <SelectTrigger className="flex-grow">