Hugging Face's logo

Spaces:
LinHanjiang
/
lama
Configuration error

App Files Community
lama
File size: 3,590 Bytes 
74aacd5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
 
import React, { ReactNode } from 'react'
import { useRecoilState } from 'recoil'
import { hdSettingsState, settingState } from '../../store/Atoms'
import Selector from '../shared/Selector'
import NumberInputSetting from './NumberInputSetting'
import SettingBlock from './SettingBlock'

export enum HDStrategy {
  ORIGINAL = 'Original',
  RESIZE = 'Resize',
  CROP = 'Crop',
}

export enum LDMSampler {
  ddim = 'ddim',
  plms = 'plms',
}

function HDSettingBlock() {
  const [hdSettings, setHDSettings] = useRecoilState(hdSettingsState)
  if (!hdSettings?.enabled) {
    return <></>
  }

  const onStrategyChange = (value: HDStrategy) => {
    setHDSettings({ hdStrategy: value })
  }

  const onResizeLimitChange = (value: string) => {
    const val = value.length === 0 ? 0 : parseInt(value, 10)
    setHDSettings({ hdStrategyResizeLimit: val })
  }

  const onCropTriggerSizeChange = (value: string) => {
    const val = value.length === 0 ? 0 : parseInt(value, 10)
    setHDSettings({ hdStrategyCropTrigerSize: val })
  }

  const onCropMarginChange = (value: string) => {
    const val = value.length === 0 ? 0 : parseInt(value, 10)
    setHDSettings({ hdStrategyCropMargin: val })
  }

  const renderOriginalOptionDesc = () => {
    return (
      <div>
        Use original picture, suitable for picture size below 2K. Try{' '}
        <div
          tabIndex={0}
          role="button"
          className="inline-tip"
          onClick={() => onStrategyChange(HDStrategy.RESIZE)}
        >
          Resize
        </div>
        {' or '}
        <div
          tabIndex={0}
          role="button"
          className="inline-tip"
          onClick={() => onStrategyChange(HDStrategy.CROP)}
        >
          Crop
        </div>{' '}
        if you didn&apos;t get good results or have GPU memory issue.
      </div>
    )
  }

  const renderResizeOptionDesc = () => {
    return (
      <>
        <div>
          Resize the longer side of the image to a specific size, then do
          inpainting on the resized image.
        </div>
        <NumberInputSetting
          title="Size limit"
          value={`${hdSettings.hdStrategyResizeLimit}`}
          suffix="pixel"
          onValue={onResizeLimitChange}
        />
      </>
    )
  }

  const renderCropOptionDesc = () => {
    return (
      <>
        <div>Crop masking area from the original image to do inpainting.</div>
        <NumberInputSetting
          title="Trigger size"
          value={`${hdSettings.hdStrategyCropTrigerSize}`}
          suffix="pixel"
          onValue={onCropTriggerSizeChange}
        />
        <NumberInputSetting
          title="Crop margin"
          value={`${hdSettings.hdStrategyCropMargin}`}
          suffix="pixel"
          onValue={onCropMarginChange}
        />
      </>
    )
  }

  const renderHDStrategyOptionDesc = (): ReactNode => {
    switch (hdSettings.hdStrategy) {
      case HDStrategy.ORIGINAL:
        return renderOriginalOptionDesc()
      case HDStrategy.CROP:
        return renderCropOptionDesc()
      case HDStrategy.RESIZE:
        return renderResizeOptionDesc()
      default:
        return renderOriginalOptionDesc()
    }
  }

  return (
    <SettingBlock
      className="hd-setting-block"
      title="Strategy"
      input={
        <Selector
          width={80}
          value={hdSettings.hdStrategy as string}
          options={Object.values(HDStrategy)}
          onChange={val => onStrategyChange(val as HDStrategy)}
        />
      }
      optionDesc={renderHDStrategyOptionDesc()}
    />
  )
}

export default HDSettingBlock