add example

kenshin1983 · Dec 17, 2023 · c80506f · c80506f
1 parent 92648ee
commit c80506f
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 17 deletions.
diff --git a/public/examples/bag.thumb.jpeg b/public/examples/bag.thumb.jpeg
diff --git a/public/examples/bird.jpeg b/public/examples/bird.jpeg
diff --git a/public/examples/car.jpeg b/public/examples/car.jpeg
diff --git a/public/examples/dog.jpeg b/public/examples/dog.jpeg
diff --git a/public/examples/jacket.thumb.jpeg b/public/examples/jacket.thumb.jpeg
diff --git a/public/examples/paris.thumb.jpeg b/public/examples/paris.thumb.jpeg
diff --git a/public/examples/shoe.thumb.jpeg b/public/examples/shoe.thumb.jpeg
diff --git a/public/examples/table.thumb.jpeg b/public/examples/table.thumb.jpeg
diff --git a/src/App.tsx b/src/App.tsx
@@ -85,21 +85,24 @@ function App() {
                   Try it:
                 </span>
                 <div className="flex space-x-2 sm:space-x-4 px-4">
-                  {['bag', 'jacket', 'table', 'shoe', 'paris'].map(image => (
-                    <div
-                      key={image}
-                      onClick={() => startWithDemoImage(image)}
-                      role="button"
-                      onKeyDown={() => startWithDemoImage(image)}
-                      tabIndex={-1}
-                    >
-                      <img
-                        className="rounded-md hover:opacity-75"
-                        src={`examples/${image}.thumb.jpeg`}
-                        alt={image}
-                      />
-                    </div>
-                  ))}
+                  {['dog', 'car', 'bird', 'bag', 'jacket', 'shoe', 'paris'].map(
+                    image => (
+                      <div
+                        key={image}
+                        onClick={() => startWithDemoImage(image)}
+                        role="button"
+                        onKeyDown={() => startWithDemoImage(image)}
+                        tabIndex={-1}
+                      >
+                        <img
+                          className="rounded-md hover:opacity-75 w-auto h-25"
+                          src={`examples/${image}.jpeg`}
+                          alt={image}
+                          style={{ height: '100px' }}
+                        />
+                      </div>
+                    )
+                  )}
                 </div>
               </div>
             </div>

diff --git a/src/Editor.tsx b/src/Editor.tsx
@@ -642,7 +642,7 @@ export default function Editor(props: EditorProps) {
           style={{
             width: `${scaledBrushSize}px`,
             height: `${scaledBrushSize}px`,
-            transform: `translate3d(-1px, -1px, 0)`,
+            transform: `translate3d(-100px, -100px, 0)`,
           }}
           ref={brushRef}
         />
@@ -697,7 +697,7 @@ export default function Editor(props: EditorProps) {
         >
           Original
         </Button>
-        {!showOriginal && <Button onUp={onSuperRsolution}>IMG X 4</Button>}
+        {!showOriginal && <Button onUp={onSuperRsolution}>4x-upscaling</Button>}
 
         <Button
           primary