Art generation with VQGAN + CLIP in Docker, with a simple web UI for anyone with a GPU. A simplified and expanded take on Kevin Costa's work.
aiai-artclipdockerdocker-composegpuhandcodedimagenetpythonpytorchtorchtorchvisionvqganvqgan-clip
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6
7 <title>AI-Art Outputs</title>
8
9 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
10 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/photoswipe.css" rel="stylesheet" integrity="sha256-olf9rfn3AG8zR6lkPXkN3PZq63z8tElx7Ela6T4eklo=" crossorigin="anonymous">
11 </head>
12 <body class="bg-dark">
13 <div class="container-fluid my-4">
14 <div id="my-gallery" class="row justify-content-center align-item-center">
15 {% for link in links %}
16 <div class="mb-4" style="width: 320px;">
17 <div class="card w-100 border-warning rounded-bottom">
18 <a href="{{ link.file }}" target="_blank" data-pswp-width="{{ link.width }}" data-pswp-height="{{ link.height }}">
19 <img src="{{ link.file }}" class="w-100 h-auto card-img-top">
20 </a>
21 <div class="card-body p-2">
22 <h5 class="card-title">{{ link.title }}</h5>
23 <p class="card-text small mb-0">{{ link.id }}</p>
24 <p class="card-text text-muted small">{{ link.date }}</p>
25 </div>
26 </div>
27 </div>
28 {% endfor %}
29 </div>
30 </div>
31
32 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
33 <script type="module">
34 import PhotoSwipeLightbox from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/photoswipe-lightbox.esm.min.js';
35 const lightbox = new PhotoSwipeLightbox({
36 gallery: '#my-gallery',
37 children: 'a',
38
39 initialZoomLevel: 'fill',
40 secondaryZoomLevel: 3,
41 maxZoomLevel: 6,
42
43 pswpModule: () => import('https://cdn.jsdelivr.net/npm/[email protected]/dist/photoswipe.esm.js')
44 });
45 lightbox.init();
46 </script>
47 </body>
48</html>