Skip to content

Commit dc6f356

Browse files
combimauricombimauri
committed
Minor fixes
1 parent c398587 commit dc6f356

File tree

4 files changed

+69
-55
lines changed

4 files changed

+69
-55
lines changed

‎src/components/Banner.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import logoBuildWithAI from '../assets/images/logo-build-with-ai.png';
55
import boliviaLogo from '../assets/images/bolivia-logo.svg';
66
---
77

8-
<section class="mt-16 relative bg-hero-section bg-cover bg-no-repeat h-dvh min-h-800">
8+
<section class="mt-16 relative bg-hero-section bg-cover bg-no-repeat h-[calc(100dvh-65px)] min-h-800">
99
<div
1010
class="flex flex-col justify-center xl:w-1/2 h-full"
1111
>

‎src/components/StyleTransfer.astro

Lines changed: 56 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,17 @@
33
<div class="max-w-screen-lg mt-12 mx-auto px-4 py-16">
44
<h2 class="text-2xl font-bold">Transferencia de estilo</h2>
55
<p class="sm:text-lg mt-1 mb-4">
6-
La transferencia de estilo aplica el estilo de una imagen a otra. Sube una imagen para ver cómo
7-
se aplica un estilo dibujo a lapiz, puedes cambiar la imagen para aplicar otro estilo.
6+
La transferencia de estilo aplica el estilo de una imagen a otra. Sube una
7+
imagen para ver cómo se aplica un estilo dibujo a lapiz, puedes cambiar la
8+
imagen para aplicar otro estilo.
89
</p>
910

1011
<div class="flex space-x-2 sm:space-x-8 mb-6">
1112
<div class="w-1/2 flex flex-col min-h-64 sm:text-lg">
12-
<label for="content" class="py-1 text-center font-semibold bg-black text-white cursor-pointer">
13+
<label
14+
for="content"
15+
class="py-1 text-center font-semibold bg-black text-white cursor-pointer"
16+
>
1317
1. Sube una imagen
1418
<input type="file" id="content" accept="image/*" hidden />
1519
</label>
@@ -18,83 +22,93 @@
1822
</div>
1923

2024
<div class="w-1/2 flex flex-col min-h-64 sm:text-lg">
21-
<label for="style" class="py-1 text-center font-semibold bg-black text-white cursor-pointer">
25+
<label
26+
for="style"
27+
class="py-1 text-center font-semibold bg-black text-white cursor-pointer"
28+
>
2229
2. Sube un estilo
2330
<input type="file" id="style" accept="image/*" hidden />
2431
</label>
25-
<img id="styleImg" class="mt-2 mx-auto" src="seaport.jpg" />
32+
<img id="styleImg" class="mt-2 mx-auto" src="/seaport.jpg" />
2633
</div>
2734
</div>
2835

29-
<div id="result" class="flex flex-col bg-black w-fit mx-auto py-2 px-4 pb-4 space-y-4 invisible">
36+
<div
37+
id="result"
38+
class="flex flex-col bg-black w-fit mx-auto py-2 px-4 pb-4 space-y-4 invisible"
39+
>
3040
<span class="text-center font-bold text-white">Resultado ✨</span>
3141
<canvas id="stylized" class="mx-auto" height="0"></canvas>
3242
</div>
3343
</div>
3444

3545
<script>
3646
function loadFile(input, imgId) {
37-
const file = input?.files[0]
38-
const output = document.getElementById(imgId) as HTMLImageElement
47+
const file = input?.files[0];
48+
const output = document.getElementById(imgId) as HTMLImageElement;
3949

40-
const reader = new FileReader()
50+
const reader = new FileReader();
4151
reader.onload = () => {
42-
output.src = reader.result
52+
output.src = reader.result;
4353

4454
// reduce image size for better performance
45-
if (imgId === "contentImg") {
46-
output.width = 400
55+
if (imgId === 'contentImg') {
56+
output.width = 400;
4757
}
48-
}
58+
};
4959

50-
if (file) reader.readAsDataURL(file)
60+
if (file) reader.readAsDataURL(file);
5161
}
5262

53-
document.getElementById("content").addEventListener("change", function () {
54-
loadFile(this, "contentImg")
55-
})
63+
document.getElementById('content').addEventListener('change', function () {
64+
loadFile(this, 'contentImg');
65+
});
5666

57-
document.getElementById("style").addEventListener("change", function () {
58-
loadFile(this, "styleImg")
59-
})
67+
document.getElementById('style').addEventListener('change', function () {
68+
loadFile(this, 'styleImg');
69+
});
6070

61-
const contentImage = document.getElementById("contentImg") as HTMLImageElement
62-
const styleImage = document.getElementById("styleImg") as HTMLImageElement
71+
const contentImage = document.getElementById(
72+
'contentImg',
73+
) as HTMLImageElement;
74+
const styleImage = document.getElementById('styleImg') as HTMLImageElement;
6375

64-
const resultContainer = document.getElementById("result")
65-
const stylizedCanvas = document.getElementById("stylized") as HTMLCanvasElement
66-
const ctx = stylizedCanvas.getContext("2d")
76+
const resultContainer = document.getElementById('result');
77+
const stylizedCanvas = document.getElementById(
78+
'stylized',
79+
) as HTMLCanvasElement;
80+
const ctx = stylizedCanvas.getContext('2d');
6781

68-
let model
82+
let model;
6983
async function getModel() {
7084
if (!model?.initialized) {
71-
model = new mi.ArbitraryStyleTransferNetwork()
72-
await model.initialize()
85+
model = new mi.ArbitraryStyleTransferNetwork();
86+
await model.initialize();
7387
}
74-
return model
88+
return model;
7589
}
7690

7791
async function stylize() {
78-
if (!contentImage.src || !styleImage.src) return
92+
if (!contentImage.src || !styleImage.src) return;
7993

80-
ctx.reset()
94+
ctx.reset();
8195

82-
resultContainer.classList.remove("invisible")
83-
stylizedCanvas.width = contentImage.width
84-
stylizedCanvas.height = contentImage.height
85-
stylizedCanvas.classList.add("bg-gray", "animate-pulse")
96+
resultContainer.classList.remove('invisible');
97+
stylizedCanvas.width = contentImage.width;
98+
stylizedCanvas.height = contentImage.height;
99+
stylizedCanvas.classList.add('bg-gray', 'animate-pulse');
86100

87101
// delay to prevent freezing the UI
88102
setTimeout(async () => {
89-
const model = await getModel()
90-
const imageData = await model.stylize(contentImage, styleImage)
103+
const model = await getModel();
104+
const imageData = await model.stylize(contentImage, styleImage);
91105

92-
stylizedCanvas.classList.remove("animate-pulse")
106+
stylizedCanvas.classList.remove('animate-pulse');
93107

94-
ctx.putImageData(imageData, 0, 0)
95-
}, 500)
108+
ctx.putImageData(imageData, 0, 0);
109+
}, 500);
96110
}
97111

98-
styleImage.onload = stylize
99-
contentImage.onload = stylize
112+
styleImage.onload = stylize;
113+
contentImage.onload = stylize;
100114
</script>

‎src/layouts/Layout.astro

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,11 @@ import '@styles/base.css'
2727
<slot></slot>
2828
</body>
2929
</html>
30+
31+
<script is:inline src="https://bitter-breeze-0001.ploomberapp.io/copilot/index.js"
32+
></script>
33+
<script>
34+
window['mountChainlitWidget']({
35+
chainlitServer: 'https://bitter-breeze-0001.ploomberapp.io',
36+
});
37+
</script>

‎src/pages/index.astro

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
2+
import AboutUs from 'components/AboutUs.astro';
3+
import Banner from 'components/Banner.astro';
4+
import Layout from 'layouts/Layout.astro';
25
import Navbar from 'components/Navbar.astro';
3-
import Banner from '../components/Banner.astro';
4-
import Layout from '../layouts/Layout.astro';
5-
import AboutUs from '../components/AboutUs.astro';
6+
import Organizers from 'components/organizers/Organizers.astro';
67
import Workshops from 'components/Workshops.astro';
7-
import Organizers from '../components/organizers/Organizers.astro';
88
---
99

1010
<Layout>
@@ -16,11 +16,3 @@ import Organizers from '../components/organizers/Organizers.astro';
1616
<Organizers />
1717
</main>
1818
</Layout>
19-
20-
<script is:inline src="https://bitter-breeze-0001.ploomberapp.io/copilot/index.js"
21-
></script>
22-
<script>
23-
window.mountChainlitWidget({
24-
chainlitServer: 'https://bitter-breeze-0001.ploomberapp.io',
25-
});
26-
</script>

0 commit comments

Comments
 (0)