feat: migrated to new slider component

Vali-98 · Dec 18, 2024 · ac38f91 · ac38f91
1 parent 384c342
commit ac38f91
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 210 deletions.
diff --git a/app/BookInfo/Entry.js b/app/BookInfo/Entry.js
@@ -1,5 +1,4 @@
 import CheckboxTitle from '@components/CheckboxTitle'
-import SliderItem from '@components/SliderItem'
 import { FontAwesome } from '@expo/vector-icons'
 import { Style, Logger } from 'constants/Global'
 import { useState, useRef } from 'react'
@@ -106,27 +105,6 @@ const Entry = ({ data, datakey, updateBook }) => {
                         updateBook(datakey, 'disable', value)
                     }}
                 />
-                <SliderItem
-                    name="Position"
-                    body={data}
-                    varname="position"
-                    min={0}
-                    max={100}
-                    step={1}
-                    precision={0}
-                    onChange={(value) => updateBook(datakey, 'position', value)}
-                />
-
-                <SliderItem
-                    name="Order"
-                    body={data}
-                    varname="order"
-                    min={0}
-                    max={100}
-                    step={1}
-                    precision={0}
-                    onChange={(value) => updateBook(datakey, 'order', value)}
-                />
             </Collapsible>
         </View>
     )

diff --git a/app/Instruct.tsx b/app/Instruct.tsx
@@ -3,7 +3,7 @@ import CheckboxTitle from '@components/CheckboxTitle'
 import DropdownSheet from '@components/DropdownSheet'
 import FadeDownView from '@components/FadeDownView'
 import PopupMenu from '@components/PopupMenu'
-import SliderItem from '@components/SliderItem'
+import SliderInput from '@components/SliderInput'
 import StringArrayEditor from '@components/StringArrayEditor'
 import TextBox from '@components/TextBox'
 import TextBoxModal from '@components/TextBoxModal'
@@ -372,11 +372,12 @@ const Instruct = () => {
                             </View>
                         </View>
 
-                        <SliderItem
-                            name="Autoformat New Chats"
-                            varname="format_type"
-                            body={currentInstruct}
-                            setValue={setCurrentInstruct}
+                        <SliderInput
+                            label="Autoformat New Chats"
+                            value={currentInstruct.format_type}
+                            onValueChange={(value) =>
+                                setCurrentInstruct({ ...currentInstruct, format_type: value })
+                            }
                             min={0}
                             max={3}
                             step={1}

diff --git a/app/SamplerMenu.tsx b/app/SamplerMenu.tsx
@@ -1,7 +1,7 @@
 import Alert from '@components/Alert'
 import CheckboxTitle from '@components/CheckboxTitle'
 import FadeDownView from '@components/FadeDownView'
-import SliderItem from '@components/SliderItem'
+import SliderInput from '@components/SliderInput'
 import TextBox from '@components/TextBox'
 import TextBoxModal from '@components/TextBoxModal'
 import { APISampler } from '@constants/APIState/BaseAPI'
@@ -237,12 +237,20 @@ const SamplerMenu = () => {
                                         return (
                                             (samplerItem.values.type === 'float' ||
                                                 samplerItem.values.type === 'integer') && (
-                                                <SliderItem
+                                                <SliderInput
                                                     key={item.samplerID}
-                                                    varname={samplerItem.internalID}
-                                                    body={currentPreset}
-                                                    setValue={setCurrentPreset}
-                                                    name={samplerItem.friendlyName}
+                                                    value={
+                                                        currentPreset[
+                                                            samplerItem.internalID
+                                                        ] as number
+                                                    }
+                                                    onValueChange={(value) => {
+                                                        setCurrentPreset({
+                                                            ...currentPreset,
+                                                            [samplerItem.internalID]: value,
+                                                        })
+                                                    }}
+                                                    label={samplerItem.friendlyName}
                                                     min={samplerItem.values.min}
                                                     max={samplerItem.values.max}
                                                     step={samplerItem.values.step}

diff --git a/app/components/ModelManager/ModelSettings.tsx b/app/components/ModelManager/ModelSettings.tsx
@@ -1,6 +1,6 @@
 import Alert from '@components/Alert'
 import SectionTitle from '@components/SectionTitle'
-import SliderItem from '@components/SliderItem'
+import SliderInput from '@components/SliderInput'
 import SwitchTitle from '@components/SwitchTitle'
 import SwitchWithDescription from '@components/SwitchWithDescription'
 import { AppSettings, Global, Logger, Style } from 'constants/Global'
@@ -78,58 +78,55 @@ const ModelSettings: React.FC<ModelSettingsProp> = ({ modelImporting, modelLoadi
             exiting={SlideOutRight.easing(Easing.inOut(Easing.cubic))}>
             <SectionTitle>CPU Settings</SectionTitle>
             <View style={{ marginTop: 16 }} />
-            <SliderItem
-                name="Max Context"
-                body={preset}
-                setValue={setPreset}
-                varname="context_length"
-                min={1024}
-                max={32768}
-                step={1024}
-                disabled={modelImporting || modelLoading}
-            />
-            <SliderItem
-                name="Threads"
-                body={preset}
-                setValue={setPreset}
-                varname="threads"
-                min={1}
-                max={8}
-                step={1}
-                disabled={modelImporting || modelLoading}
-            />
-
-            <SliderItem
-                name="Batch"
-                body={preset}
-                setValue={setPreset}
-                varname="batch"
-                min={16}
-                max={512}
-                step={16}
-                disabled={modelImporting || modelLoading}
-            />
-            {/* Note: llama.rn does not have any Android gpu acceleration */}
-            {Platform.OS === 'ios' && (
-                <SliderItem
-                    name="GPU Layers"
-                    body={preset}
-                    setValue={setPreset}
-                    varname="gpu_layers"
-                    min={0}
-                    max={100}
-                    step={1}
-                />
+            {preset && (
+                <View>
+                    <SliderInput
+                        label="Max Context"
+                        value={preset.context_length}
+                        onValueChange={(value) => setPreset({ ...preset, context_length: value })}
+                        min={1024}
+                        max={32768}
+                        step={1024}
+                        disabled={modelImporting || modelLoading}
+                    />
+                    <SliderInput
+                        label="Threads"
+                        value={preset.threads}
+                        onValueChange={(value) => setPreset({ ...preset, threads: value })}
+                        min={1}
+                        max={8}
+                        step={1}
+                        disabled={modelImporting || modelLoading}
+                    />
+
+                    <SliderInput
+                        label="Batch"
+                        value={preset.batch}
+                        onValueChange={(value) => setPreset({ ...preset, batch: value })}
+                        min={16}
+                        max={512}
+                        step={16}
+                        disabled={modelImporting || modelLoading}
+                    />
+                    {/* Note: llama.rn does not have any Android gpu acceleration */}
+                    {Platform.OS === 'ios' && (
+                        <SliderInput
+                            label="GPU Layers"
+                            value={preset.gpu_layers}
+                            onValueChange={(value) => setPreset({ ...preset, gpu_layers: value })}
+                            min={0}
+                            max={100}
+                            step={1}
+                        />
+                    )}
+                </View>
             )}
-
             <SectionTitle>Advanced Settings</SectionTitle>
-
             <SwitchTitle
                 title="Automatically Load Model on Chat"
                 value={autoloadLocal}
                 onValueChange={setAutoloadLocal}
             />
-
             <SwitchWithDescription
                 title="Save Local KV"
                 value={saveKV}
@@ -140,7 +137,6 @@ const ModelSettings: React.FC<ModelSettingsProp> = ({ modelImporting, modelLoadi
                         : 'Saves the KV cache on generations, allowing you to continue sessions after closing the app. Must use the same model for this to function properly. Saving the KV cache file may be very big and negatively impact battery life!'
                 }
             />
-
             {saveKV && (
                 <TouchableOpacity
                     onPress={handleDeleteKV}

diff --git a/app/components/SliderItem.tsx b/app/components/SliderItem.tsx