Skip to content

Commit 044637a

Browse files
frankievxfrankievx
committed
Styling
1 parent 5dc2596 commit 044637a

16 files changed

+156
-12
lines changed

‎components/Navbar.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
export default function Navbar () {
33
return (
4-
<div className="text-center text-xl py-6 font-bold border-b border-solid">
4+
<div className="font-serif text-center text-xl py-4 border-b border-solid bg-secondary z-10">
55
Style Transfer Configurator
66
</div>
77
)

‎components/Select.jsx

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { Fragment, useState } from 'react'
2+
import { Listbox, Transition } from '@headlessui/react'
3+
import { CheckIcon, SelectorIcon } from '@heroicons/react/solid'
4+
5+
function classNames(...classes) {
6+
return classes.filter(Boolean).join(' ')
7+
}
8+
export default function Select({ label = '', options }) {
9+
const [selected, setSelected] = useState(options[0])
10+
11+
return (
12+
<Listbox value={selected} onChange={setSelected}>
13+
{({ open }) => (
14+
<>
15+
<Listbox.Label className="block text-sm font-medium text-gray-700 text-left ml-2">{label}</Listbox.Label>
16+
<div className="mt-1 relative">
17+
<Listbox.Button className="relative w-full bg-primary-light border border-primary rounded-md shadow-sm pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary sm:text-sm">
18+
<span className="flex items-center">
19+
<span className="ml-3 block truncate">{selected.label}</span>
20+
</span>
21+
<span className="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
22+
<SelectorIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
23+
</span>
24+
</Listbox.Button>
25+
26+
<Transition
27+
show={open}
28+
as={Fragment}
29+
leave="transition ease-in duration-100"
30+
leaveFrom="opacity-100"
31+
leaveTo="opacity-0"
32+
>
33+
<Listbox.Options
34+
static
35+
className="absolute z-10 mt-1 w-full bg-primary-light shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
36+
>
37+
{options.map((option, i) => (
38+
<Listbox.Option
39+
key={option.label + i}
40+
className={({ active }) =>
41+
classNames(
42+
active ? 'text-white bg-primary' : 'text-gray-900',
43+
'cursor-default select-none relative py-2 pl-3 pr-9'
44+
)
45+
}
46+
value={option.label}
47+
>
48+
{({ selected, active }) => (
49+
<>
50+
<div className="flex">
51+
<span
52+
className={classNames(selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate')}
53+
>
54+
{option.label}
55+
</span>
56+
</div>
57+
58+
{selected ? (
59+
<span
60+
className={classNames(
61+
active ? 'text-white' : 'text-primary',
62+
'absolute inset-y-0 right-0 flex items-center pr-4'
63+
)}
64+
>
65+
<CheckIcon className="h-5 w-5" aria-hidden="true" />
66+
</span>
67+
) : null}
68+
</>
69+
)}
70+
</Listbox.Option>
71+
))}
72+
</Listbox.Options>
73+
</Transition>
74+
</div>
75+
</>
76+
)}
77+
</Listbox>
78+
)
79+
}

‎layouts/main.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ export default function Layout({ children }) {
99
<link rel="icon" href="/favicon.ico" />
1010
</Head>
1111

12-
<header className="fixed z-10 bg-white text-center w-full"><Navbar/></header>
13-
<main className="flex flex-col h-screen relative">
14-
<div className="absolute top-20 h-full">
12+
<header className="fixed z-10 bg-primary text-center w-full"><Navbar/></header>
13+
<main className="flex flex-col h-screen relative bg-accent">
14+
<div className="absolute top-20 h-ful">
1515
{children}
1616
</div>
1717
</main>

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
"start": "next start"
77
},
88
"dependencies": {
9+
"@headlessui/react": "^1.3.0",
10+
"@heroicons/react": "^1.0.2",
911
"@tensorflow/tfjs": "^3.8.0",
1012
"bootstrap": "5.0.2",
1113
"next": "11.0.2-canary.20",

‎pages/_app.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import 'tailwindcss/tailwind.css'
2-
import 'bootstrap/dist/css/bootstrap.min.css';
2+
import './styles/tailwind.css'
33
import Layout from '/layouts/main.jsx'
44

55
function MyApp({ Component, pageProps }) {

‎pages/style-transfer/index.js

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,20 @@ import { useState, useEffect, useRef } from 'react'
44
import { useRouter } from 'next/router'
55
import contentImg from '/public/images/willow-flycatcher.jpeg'
66
import styleImg from '/public/images/wing-bg.jpeg'
7-
7+
import Select from '/components/Select'
88
let mobileStyleNet, separableTransformNet;
99

1010

11+
const styleModelOptions = [
12+
{ label: 'Distilled MobileNet', sublabel: 'Performance' },
13+
{ label: 'Inception v3', sublabel: 'Quality' }
14+
]
15+
16+
const transformModelOptions = [
17+
{ label: 'Separable Conv2D', sublabel: 'Performance' },
18+
{ label: 'Original', sublabel: 'Quality' }
19+
]
20+
1121
export default function StyleTransfer() {
1222
let styleEl, contentEl;
1323
let [styleRatio, setStyleRatio] = useState(1)
@@ -27,7 +37,6 @@ export default function StyleTransfer() {
2737

2838
styleNet = mobileStyleNet
2939
transformNet = separableTransformNet
30-
console.log('stylizedRef', stylizedRef);
3140
})
3241

3342
const handleClick = async () => {
@@ -57,24 +66,26 @@ export default function StyleTransfer() {
5766

5867

5968
return (
60-
<div className="w-screen pb-4">
69+
<div className="w-screen pb-4 bg-accent">
6170
<div className="w-full text-center px-2">
6271
<div>
6372
<div className="text-xl pb-3">Content Image</div>
6473
<Image id="contentImg" src={contentImg} onLoadingComplete={contentImgLoaded}/>
6574
</div>
6675
<div className="w-full">
67-
<div className="text-xl pt-4">Style Image</div>
76+
<div className="text-xl pt-4 ">Style Image</div>
6877
<Image id="styleImg" src={styleImg} onLoadingComplete={styleImgLoaded}/>
6978
</div>
7079
<div className="w-full">
7180
<div className="text-xl pt-4">Computed Image</div>
81+
<Select label="Style Model" options={styleModelOptions}/>
82+
<div className="mt-4"><Select label="Transformer Model" options={transformModelOptions}/></div>
7283
<canvas ref={stylizedRef}></canvas>
7384
</div>
7485
</div>
75-
<div className="w-full text-center">
86+
<div className="w-full text-center ">
7687
<button
77-
className="px-6 py-2 mt-2 bg-green-600 text-white rounded"
88+
className="px-6 py-2 mt-2 bg-primary text-black rounded"
7889
onClick={handleClick}
7990
>
8091
Train

‎pages/styles/tailwind.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
@layer base {
6+
@font-face {
7+
font-family: Merriweather;
8+
font-weight: 400;
9+
src: url(/fonts/Merriweather-Regular.ttf) format("truetype");
10+
}
11+
@font-face {
12+
font-family: Merriweather;
13+
font-weight: 600;
14+
src: url(/fonts/Merriweather-Bold.ttf) format("truetype");
15+
}
16+
@font-face {
17+
font-family: Muli;
18+
font-weight: 400;
19+
src: url(/fonts/Muli-Regular.ttf) format("truetype");
20+
}
21+
@font-face {
22+
font-family: Merriweather;
23+
font-weight: 600;
24+
src: url(/fonts/Muli-Bold.ttf) format("truetype");
25+
}
26+
}

‎public/fonts/Merriweather-Bold.ttf

108 KB
Binary file not shown.

‎public/fonts/Merriweather-Light.ttf

108 KB
Binary file not shown.

‎public/fonts/Merriweather-Regular.ttf

108 KB
Binary file not shown.

0 commit comments

Comments
 (0)