First Commit

.editorconfig

@@ -0,0 +1,10 @@
+# editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintignore

@@ -0,0 +1,5 @@
+dist/*
+.cache
+public
+node_modules
+*.esm.js

.eslintrc.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://json.schemastore.org/eslintrc",
+  "root": true,
+  "extends": [
+    "next/core-web-vitals",
+    "prettier",
+    "plugin:tailwindcss/recommended"
+  ],
+  "plugins": ["tailwindcss"],
+  "rules": {
+    "@next/next/no-html-link-for-pages": "off",
+    "react/jsx-key": "off",
+    "tailwindcss/no-custom-classname": "off"
+  },
+  "settings": {
+    "tailwindcss": {
+      "callees": ["cn"],
+      "config": "tailwind.config.js"
+    },
+    "next": {
+      "rootDir": ["./"]
+    }
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "parser": "@typescript-eslint/parser"
+    }
+  ]
+}

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+yarn.lock
+.yarnrc.yml
+.yarn/
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+build
+
+
+# misc
+.DS_Store
+*.pem
+public/ai-data/
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo
+
+.contentlayer
+.env

.prettierignore

@@ -0,0 +1,12 @@
+cache
+.cache
+package.json
+package-lock.json
+public
+CHANGELOG.md
+.yarn
+dist
+node_modules
+.next
+build
+.contentlayer

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "../../node_modules/.pnpm/[email protected]/node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

LICENCE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Yoannis Sánchez Soto
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,22 @@
+<h1 align="center">Year Progress 📅</h1>
+
+<p align="center">
+📅 New Year Countdown.  It shows the remaining days, hours, minutes, and seconds until the new year arrives. 🥳🎉
+</p>
+
+<p align="center">
+<a href="https://year-progress.vercel.app/" target="_blank">year-progress.pages.dev</a>
+</p>
+
+![blog](docs/banner.png)
+
+<div align="center">
+<img src="https://img.shields.io/badge/Next.js-000?logo=nextdotjs&logoColor=fff&style=for-the-badge" alt="Next.js Badge">
+<img src="https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=fff&style=for-the-badge" alt="TypeScript Badge">
+<img src="https://img.shields.io/badge/shadcn%2Fui-000?logo=shadcnui&logoColor=fff&style=for-the-badge" alt="shadcn/ui Badge">
+<img src="https://img.shields.io/badge/Tailwind%20CSS-06B6D4?logo=tailwindcss&logoColor=fff&style=for-the-badge" alt="Tailwind CSS Badge">
+</div>
+
+## ⚖️ License
+
+Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).

app/layout.tsx

@@ -0,0 +1,66 @@
+import "@/styles/globals.css"
+import { Metadata } from "next"
+
+import { siteConfig } from "@/config/site"
+import { fontSans } from "@/lib/fonts"
+import { cn } from "@/lib/utils"
+import { Meteors } from "@/components/ui/meteors"
+import { Footer } from "@/components/footer"
+import { SiteHeader } from "@/components/site-header"
+import { TailwindIndicator } from "@/components/tailwind-indicator"
+import { ThemeProvider } from "@/components/theme-provider"
+
+export const metadata: Metadata = {
+  title: {
+    default: siteConfig.name,
+    template: `%s - ${siteConfig.name}`,
+  },
+  description: siteConfig.description,
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "white" },
+    { media: "(prefers-color-scheme: dark)", color: "black" },
+  ],
+  openGraph: {
+    images: [
+      {
+        url: "https://year-progress.pages.dev/og.png",
+      },
+    ],
+  },
+  icons: {
+    icon: "/favicon.svg",
+    shortcut: "/favicon-16x16.png",
+    apple: "/apple-touch-icon.png",
+  },
+}
+
+interface RootLayoutProps {
+  children: React.ReactNode
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <>
+      <html lang="en" suppressHydrationWarning>
+        <head />
+        <body
+          className={cn(
+            "min-h-screen bg-background font-sans antialiased",
+            fontSans.variable
+          )}
+        >
+          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+            <div className="relative flex h-screen min-h-screen flex-col">
+              <SiteHeader />
+
+              <div className="flex-1">{children}</div>
+
+              <Footer></Footer>
+            </div>
+            <TailwindIndicator />
+          </ThemeProvider>
+        </body>
+      </html>
+    </>
+  )
+}

app/page.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import { FormEvent, useState } from "react"
+import Image from "next/image"
+import imglyRemoveBackground, { Config } from "@imgly/background-removal"
+import { Download, ImageIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Progress } from "@/components/ui/progress"
+
+export default function IndexPage() {
+  const [showDialog, setShowDialog] = useState(false)
+  const [dialogText, setDialogText] = useState<string>("null")
+  const [dialogProgress, setDialogProgress] = useState<number>(0)
+  const [dialogTotal, setDialogTotal] = useState<number>(100)
+
+  const [imageData, setImageData] = useState<string | null>(null)
+  const [resultData, setResultData] = useState<string | null>(null)
+
+  const handleDataChange = (e: any) => {
+    const file = e.target.files[0]
+    const url = URL.createObjectURL(file)
+
+    if (file) setImageData(url)
+  }
+
+  const handleDownload = () => {
+    const link = document.createElement("a")
+    link.href = resultData!
+    link.download = resultData!
+    link.click()
+  }
+
+  const remove = (ev: FormEvent) => {
+    ev.preventDefault()
+    let config: Config = {
+      debug: true,
+      publicPath: "http://localhost:3000/ai-data/", // path to the wasm files
+      progress: (key, current, total) => {
+        console.log(`Downloading ${key}: ${current} of ${total}`)
+        setShowDialog(true)
+        setDialogProgress(current)
+        setDialogTotal(total)
+        setDialogText(key)
+
+        if (current === total && key === "compute:inference")
+          setShowDialog(false)
+      },
+    }
+
+    if (imageData) {
+      imglyRemoveBackground(imageData!, config).then((blob: Blob) => {
+        // result is a blob encoded as PNG.
+        // It can be converted to an URL to be used as HTMLImage.src
+        const url = URL.createObjectURL(blob)
+
+        setResultData(url)
+      })
+    }
+  }
+
+  return (
+    <section className="container flex h-full flex-col gap-2 pb-8">
+      {/* Form */}
+      <form className="flex items-center gap-4" onSubmit={remove}>
+        <p>Select Image</p>
+        <ImageIcon></ImageIcon>
+        <Input
+          accept="image/*"
+          required
+          type="file"
+          onChange={handleDataChange}
+        ></Input>
+        <Button disabled={!imageData} type="submit">
+          Process
+        </Button>
+      </form>
+
+      {/* Images */}
+      <div className="flex size-full items-center justify-center gap-16  p-4">
+        {imageData ? (
+          <Image
+            width={300}
+            height={150}
+            className="max-w-96 rounded-xl transition-all hover:ring-4 hover:ring-primary"
+            src={imageData}
+            alt="Selected image"
+          />
+        ) : (
+          <div className="flex h-48 w-96 items-center justify-center rounded-xl bg-neutral-200 dark:bg-neutral-900">
+            <ImageIcon className="size-16 text-neutral-500"></ImageIcon>
+          </div>
+        )}
+        {resultData ? (
+          <div className="flex flex-col items-center justify-center gap-2">
+            <Image
+              width={300}
+              height={150}
+              className="max-w-96 rounded-xl transition-all hover:ring-4 hover:ring-primary"
+              src={resultData}
+              alt="Processed image"
+            />
+          </div>
+        ) : (
+          <div className="flex h-48  w-96 items-center justify-center rounded-xl bg-neutral-200 dark:bg-neutral-900">
+            <ImageIcon className="size-16 text-neutral-500"></ImageIcon>
+          </div>
+        )}
+      </div>
+
+      {/* Tools */}
+      <div className="flex items-center justify-center">
+        <Button
+          disabled={!resultData}
+          className="font-bold"
+          onClick={handleDownload}
+        >
+          <Download className="mr-2"></Download> Download
+        </Button>
+      </div>
+
+      <Dialog open={showDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Are you absolutely sure?</DialogTitle>
+            <DialogDescription>
+              <p>{dialogText}</p>
+              <Progress max={dialogTotal} value={dialogProgress}></Progress>
+            </DialogDescription>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
+    </section>
+  )
+}

components.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "rsc": false,
+  "aliases": {
+    "utils": "@/lib/utils",
+    "components": "@/components"
+  }
+}