Spaces:

DanielIglesias97
/

NodeImageSearchEngine

Running

App Files Files Community

DanielIglesias97 commited on Jan 29, 2025

Commit

708f5d3

1 Parent(s): 1ab83f7

First upload of the code of NodeImageSearchEngine to the repository.

Browse files

This view is limited to 50 files because it contains too many changes. See raw diff

Files changed (50) hide show

README.md +3 -23
compose.yaml +30 -0
index.html +0 -435
node_server/Dockerfile +17 -0
node_server/package.json +15 -0
node_server/server.js +39 -0
node_server/views/index.ejs +31 -0
node_server/views/style.css +64 -0
python_clip_image_search/Dockerfile +30 -0
python_clip_image_search/config.cfg +7 -0
python_clip_image_search/dataset/000000000139.jpg +0 -0
python_clip_image_search/dataset/000000000285.jpg +0 -0
python_clip_image_search/dataset/000000000632.jpg +0 -0
python_clip_image_search/dataset/000000000724.jpg +0 -0
python_clip_image_search/dataset/000000000776.jpg +0 -0
python_clip_image_search/dataset/000000000785.jpg +0 -0
python_clip_image_search/dataset/000000000802.jpg +0 -0
python_clip_image_search/dataset/000000000872.jpg +0 -0
python_clip_image_search/dataset/000000000885.jpg +0 -0
python_clip_image_search/dataset/000000001000.jpg +0 -0
python_clip_image_search/dataset/000000001268.jpg +0 -0
python_clip_image_search/dataset/000000001296.jpg +0 -0
python_clip_image_search/dataset/000000001353.jpg +0 -0
python_clip_image_search/dataset/000000001425.jpg +0 -0
python_clip_image_search/dataset/000000001490.jpg +0 -0
python_clip_image_search/dataset/000000001503.jpg +0 -0
python_clip_image_search/dataset/000000001532.jpg +0 -0
python_clip_image_search/dataset/000000001584.jpg +0 -0
python_clip_image_search/dataset/000000001675.jpg +0 -0
python_clip_image_search/dataset/000000001761.jpg +0 -0
python_clip_image_search/dataset/000000001818.jpg +0 -0
python_clip_image_search/dataset/000000001993.jpg +0 -0
python_clip_image_search/dataset/000000002006.jpg +0 -0
python_clip_image_search/dataset/000000002149.jpg +0 -0
python_clip_image_search/dataset/000000002153.jpg +0 -0
python_clip_image_search/dataset/000000002157.jpg +0 -0
python_clip_image_search/dataset/000000002261.jpg +0 -0
python_clip_image_search/dataset/000000002299.jpg +0 -0
python_clip_image_search/dataset/000000002431.jpg +0 -0
python_clip_image_search/dataset/000000002473.jpg +0 -0
python_clip_image_search/dataset/000000002532.jpg +0 -0
python_clip_image_search/dataset/000000002587.jpg +0 -0
python_clip_image_search/dataset/000000002592.jpg +0 -0
python_clip_image_search/dataset/000000002685.jpg +0 -0
python_clip_image_search/dataset/000000002923.jpg +0 -0
python_clip_image_search/dataset/000000003156.jpg +0 -0
python_clip_image_search/dataset/000000003255.jpg +0 -0
python_clip_image_search/dataset/000000003501.jpg +0 -0
python_clip_image_search/dataset/000000003553.jpg +0 -0
python_clip_image_search/dataset/000000003661.jpg +0 -0

README.md CHANGED Viewed

@@ -1,25 +1,5 @@
----
-title: NodeImageSearchEngine
-emoji: 🧠
-colorFrom: yellow
-colorTo: indigo
-sdk: static
-pinned: false
----
-# Nerfies
-This is the repository that contains source code for the [Nerfies website](https://nerfies.github.io).
-If you find Nerfies useful for your work please cite:
-```
-@article{park2021nerfies
-  author    = {Park, Keunhong and Sinha, Utkarsh and Barron, Jonathan T. and Bouaziz, Sofien and Goldman, Dan B and Seitz, Steven M. and Martin-Brualla, Ricardo},
-  title     = {Nerfies: Deformable Neural Radiance Fields},
-  journal   = {ICCV},
-  year      = {2021},
-}
-```
-# Website License
-<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.

+This repository contains the code of a NodeJS server for image search. This project was implemented to prove how to join Python code with NodeJS code using Docker.
+In particular, the Python code performs the search using the CLIP model and then sends the results to the NodeJS server. Then, this server displays the images that
+were obtained from the text search process.

compose.yaml ADDED Viewed

	@@ -0,0 +1,30 @@

+name: node_image_search_engine
+services:
+  node_frontend:
+    build: ./node_server
+    links:
+      - "python_clip_image_search:pclis"
+    ports:
+      - 3000:3000
+    volumes:
+      - type: bind
+        source: ./python_clip_image_search/dataset
+        target: /home/node/app/views/dataset
+    command: npm start
+    develop:
+      watch:
+        - action: sync
+          path: ./node_server
+          target: /home/node/app
+          ignore:
+            - ./node_server/node_modules/
+        - action: rebuild
+          path: package.json
+  python_clip_image_search:
+    build: ./python_clip_image_search
+    develop:
+      watch:
+        - action: sync
+          path: ./python_clip_image_search
+          target: /app

index.html DELETED Viewed

@@ -1,435 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta name="description"
-        content="Deformable Neural Radiance Fields creates free-viewpoint portraits (nerfies) from casually captured videos.">
-  <meta name="keywords" content="Nerfies, D-NeRF, NeRF">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Nerfies: Deformable Neural Radiance Fields</title>
-  <link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro"
-        rel="stylesheet">
-  <link rel="stylesheet" href="./static/css/bulma.min.css">
-  <link rel="stylesheet" href="./static/css/bulma-carousel.min.css">
-  <link rel="stylesheet" href="./static/css/bulma-slider.min.css">
-  <link rel="stylesheet" href="./static/css/fontawesome.all.min.css">
-  <link rel="stylesheet"
-        href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
-  <link rel="stylesheet" href="./static/css/index.css">
-  <link rel="icon" href="./static/images/favicon.svg">
-  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-  <script defer src="./static/js/fontawesome.all.min.js"></script>
-  <script src="./static/js/bulma-carousel.min.js"></script>
-  <script src="./static/js/bulma-slider.min.js"></script>
-  <script src="./static/js/index.js"></script>
-</head>
-<body>
-<section class="hero">
-  <div class="hero-body">
-    <div class="container is-max-desktop">
-      <div class="columns is-centered">
-        <div class="column has-text-centered">
-          <h1 class="title is-1 publication-title">Nerfies: Deformable Neural Radiance Fields</h1>
-          <div class="is-size-5 publication-authors">
-            <span class="author-block">
-              <a href="https://keunhong.com" target="_blank">Keunhong Park</a><sup>1</sup>,</span>
-            <span class="author-block">
-              <a href="https://utkarshsinha.com" target="_blank">Utkarsh Sinha</a><sup>2</sup>,</span>
-            <span class="author-block">
-              <a href="https://jonbarron.info" target="_blank">Jonathan T. Barron</a><sup>2</sup>,
-            </span>
-            <span class="author-block">
-              <a href="http://sofienbouaziz.com" target="_blank">Sofien Bouaziz</a><sup>2</sup>,
-            </span>
-            <span class="author-block">
-              <a href="https://www.danbgoldman.com" target="_blank">Dan B Goldman</a><sup>2</sup>,
-            </span>
-            <span class="author-block">
-              <a href="https://homes.cs.washington.edu/~seitz/" target="_blank">Steven M. Seitz</a><sup>1,2</sup>,
-            </span>
-            <span class="author-block">
-              <a href="http://www.ricardomartinbrualla.com" target="_blank">Ricardo Martin-Brualla</a><sup>2</sup>
-            </span>
-          </div>
-          <div class="is-size-5 publication-authors">
-            <span class="author-block"><sup>1</sup>University of Washington,</span>
-            <span class="author-block"><sup>2</sup>Google Research</span>
-          </div>
-          <div class="column has-text-centered">
-            <div class="publication-links">
-              <!-- PDF Link. -->
-              <span class="link-block">
-                <a href="https://arxiv.org/pdf/2011.12948" target="_blank"
-                   class="external-link button is-normal is-rounded is-dark">
-                  <span class="icon">
-                      <i class="fas fa-file-pdf"></i>
-                  </span>
-                  <span>Paper</span>
-                </a>
-              </span>
-              <span class="link-block">
-                <a href="https://arxiv.org/abs/2011.12948" target="_blank"
-                   class="external-link button is-normal is-rounded is-dark">
-                  <span class="icon">
-                      <i class="ai ai-arxiv"></i>
-                  </span>
-                  <span>arXiv</span>
-                </a>
-              </span>
-              <!-- Video Link. -->
-              <span class="link-block">
-                <a href="https://www.youtube.com/watch?v=MrKrnHhk8IA" target="_blank"
-                   class="external-link button is-normal is-rounded is-dark">
-                  <span class="icon">
-                      <i class="fab fa-youtube"></i>
-                  </span>
-                  <span>Video</span>
-                </a>
-              </span>
-              <!-- Code Link. -->
-              <span class="link-block">
-                <a href="https://github.com/google/nerfies" target="_blank"
-                   class="external-link button is-normal is-rounded is-dark">
-                  <span class="icon">
-                      <i class="fab fa-github"></i>
-                  </span>
-                  <span>Code</span>
-                  </a>
-              </span>
-              <!-- Dataset Link. -->
-              <span class="link-block">
-                <a href="https://github.com/google/nerfies/releases/tag/0.1" target="_blank"
-                   class="external-link button is-normal is-rounded is-dark">
-                  <span class="icon">
-                      <i class="far fa-images"></i>
-                  </span>
-                  <span>Data</span>
-                  </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-<section class="hero teaser">
-  <div class="container is-max-desktop">
-    <div class="hero-body">
-      <video id="teaser" autoplay muted loop playsinline height="100%">
-        <source src="./static/videos/teaser.mp4"
-                type="video/mp4">
-      </video>
-      <h2 class="subtitle has-text-centered">
-        <span class="dnerf">Nerfies</span> turns selfie videos from your phone into
-        free-viewpoint
-        portraits.
-      </h2>
-    </div>
-  </div>
-</section>
-<section class="hero is-light is-small">
-  <div class="hero-body">
-    <div class="container">
-      <div id="results-carousel" class="carousel results-carousel">
-        <div class="item item-steve">
-          <video poster="" id="steve" autoplay controls muted loop playsinline height="100%">
-            <source src="./static/videos/steve.mp4"
-                    type="video/mp4">
-          </video>
-        </div>
-        <div class="item item-chair-tp">
-          <video poster="" id="chair-tp" autoplay controls muted loop playsinline height="100%">
-            <source src="./static/videos/chair-tp.mp4"
-                    type="video/mp4">
-          </video>
-        </div>
-        <div class="item item-shiba">
-          <video poster="" id="shiba" autoplay controls muted loop playsinline height="100%">
-            <source src="./static/videos/shiba.mp4"
-                    type="video/mp4">
-          </video>
-        </div>
-        <div class="item item-fullbody">
-          <video poster="" id="fullbody" autoplay controls muted loop playsinline height="100%">
-            <source src="./static/videos/fullbody.mp4"
-                    type="video/mp4">
-          </video>
-        </div>
-        <div class="item item-blueshirt">
-          <video poster="" id="blueshirt" autoplay controls muted loop playsinline height="100%">
-            <source src="./static/videos/blueshirt.mp4"
-                    type="video/mp4">
-          </video>
-        </div>
-        <div class="item item-mask">
-          <video poster="" id="mask" autoplay controls muted loop playsinline height="100%">
-            <source src="./static/videos/mask.mp4"
-                    type="video/mp4">
-          </video>
-        </div>
-        <div class="item item-coffee">
-          <video poster="" id="coffee" autoplay controls muted loop playsinline height="100%">
-            <source src="./static/videos/coffee.mp4"
-                    type="video/mp4">
-          </video>
-        </div>
-        <div class="item item-toby">
-          <video poster="" id="toby" autoplay controls muted loop playsinline height="100%">
-            <source src="./static/videos/toby2.mp4"
-                    type="video/mp4">
-          </video>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-<section class="section">
-  <div class="container is-max-desktop">
-    <!-- Abstract. -->
-    <div class="columns is-centered has-text-centered">
-      <div class="column is-four-fifths">
-        <h2 class="title is-3">Abstract</h2>
-        <div class="content has-text-justified">
-          <p>
-            We present the first method capable of photorealistically reconstructing a non-rigidly
-            deforming scene using photos/videos captured casually from mobile phones.
-          </p>
-          <p>
-            Our approach augments neural radiance fields
-            (NeRF) by optimizing an
-            additional continuous volumetric deformation field that warps each observed point into a
-            canonical 5D NeRF.
-            We observe that these NeRF-like deformation fields are prone to local minima, and
-            propose a coarse-to-fine optimization method for coordinate-based models that allows for
-            more robust optimization.
-            By adapting principles from geometry processing and physical simulation to NeRF-like
-            models, we propose an elastic regularization of the deformation field that further
-            improves robustness.
-          </p>
-          <p>
-            We show that <span class="dnerf">Nerfies</span> can turn casually captured selfie
-            photos/videos into deformable NeRF
-            models that allow for photorealistic renderings of the subject from arbitrary
-            viewpoints, which we dub <i>"nerfies"</i>. We evaluate our method by collecting data
-            using a
-            rig with two mobile phones that take time-synchronized photos, yielding train/validation
-            images of the same pose at different viewpoints. We show that our method faithfully
-            reconstructs non-rigidly deforming scenes and reproduces unseen views with high
-            fidelity.
-          </p>
-        </div>
-      </div>
-    </div>
-    <!--/ Abstract. -->
-    <!-- Paper video. -->
-    <div class="columns is-centered has-text-centered">
-      <div class="column is-four-fifths">
-        <h2 class="title is-3">Video</h2>
-        <div class="publication-video">
-          <iframe src="https://www.youtube.com/embed/MrKrnHhk8IA?rel=0&amp;showinfo=0"
-                  frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
-        </div>
-      </div>
-    </div>
-    <!--/ Paper video. -->
-  </div>
-</section>
-<section class="section">
-  <div class="container is-max-desktop">
-    <div class="columns is-centered">
-      <!-- Visual Effects. -->
-      <div class="column">
-        <div class="content">
-          <h2 class="title is-3">Visual Effects</h2>
-          <p>
-            Using <i>nerfies</i> you can create fun visual effects. This Dolly zoom effect
-            would be impossible without nerfies since it would require going through a wall.
-          </p>
-          <video id="dollyzoom" autoplay controls muted loop playsinline height="100%">
-            <source src="./static/videos/dollyzoom-stacked.mp4"
-                    type="video/mp4">
-          </video>
-        </div>
-      </div>
-      <!--/ Visual Effects. -->
-      <!-- Matting. -->
-      <div class="column">
-        <h2 class="title is-3">Matting</h2>
-        <div class="columns is-centered">
-          <div class="column content">
-            <p>
-              As a byproduct of our method, we can also solve the matting problem by ignoring
-              samples that fall outside of a bounding box during rendering.
-            </p>
-            <video id="matting-video" controls playsinline height="100%">
-              <source src="./static/videos/matting.mp4"
-                      type="video/mp4">
-            </video>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!--/ Matting. -->
-    <!-- Animation. -->
-    <div class="columns is-centered">
-      <div class="column is-full-width">
-        <h2 class="title is-3">Animation</h2>
-        <!-- Interpolating. -->
-        <h3 class="title is-4">Interpolating states</h3>
-        <div class="content has-text-justified">
-          <p>
-            We can also animate the scene by interpolating the deformation latent codes of two input
-            frames. Use the slider here to linearly interpolate between the left frame and the right
-            frame.
-          </p>
-        </div>
-        <div class="columns is-vcentered interpolation-panel">
-          <div class="column is-3 has-text-centered">
-            <img src="./static/images/interpolate_start.jpg"
-                 class="interpolation-image"
-                 alt="Interpolate start reference image."/>
-            <p>Start Frame</p>
-          </div>
-          <div class="column interpolation-video-column">
-            <div id="interpolation-image-wrapper">
-              Loading...
-            </div>
-            <input class="slider is-fullwidth is-large is-info"
-                   id="interpolation-slider"
-                   step="1" min="0" max="100" value="0" type="range">
-          </div>
-          <div class="column is-3 has-text-centered">
-            <img src="./static/images/interpolate_end.jpg"
-                 class="interpolation-image"
-                 alt="Interpolation end reference image."/>
-            <p class="is-bold">End Frame</p>
-          </div>
-        </div>
-        <br/>
-        <!--/ Interpolating. -->
-        <!-- Re-rendering. -->
-        <h3 class="title is-4">Re-rendering the input video</h3>
-        <div class="content has-text-justified">
-          <p>
-            Using <span class="dnerf">Nerfies</span>, you can re-render a video from a novel
-            viewpoint such as a stabilized camera by playing back the training deformations.
-          </p>
-        </div>
-        <div class="content has-text-centered">
-          <video id="replay-video"
-                 controls
-                 muted
-                 preload
-                 playsinline
-                 width="75%">
-            <source src="./static/videos/replay.mp4"
-                    type="video/mp4">
-          </video>
-        </div>
-        <!--/ Re-rendering. -->
-      </div>
-    </div>
-    <!--/ Animation. -->
-    <!-- Concurrent Work. -->
-    <div class="columns is-centered">
-      <div class="column is-full-width">
-        <h2 class="title is-3">Related Links</h2>
-        <div class="content has-text-justified">
-          <p>
-            There's a lot of excellent work that was introduced around the same time as ours.
-          </p>
-          <p>
-            <a href="https://arxiv.org/abs/2104.09125" target="_blank">Progressive Encoding for Neural Optimization</a> introduces an idea similar to our windowed position encoding for coarse-to-fine optimization.
-          </p>
-          <p>
-            <a href="https://www.albertpumarola.com/research/D-NeRF/index.html" target="_blank">D-NeRF</a> and <a href="https://gvv.mpi-inf.mpg.de/projects/nonrigid_nerf/" target="_blank">NR-NeRF</a>
-            both use deformation fields to model non-rigid scenes.
-          </p>
-          <p>
-            Some works model videos with a NeRF by directly modulating the density, such as <a href="https://video-nerf.github.io/" target="_blank">Video-NeRF</a>, <a href="https://www.cs.cornell.edu/~zl548/NSFF/" target="_blank">NSFF</a>, and <a href="https://neural-3d-video.github.io/" target="_blank">DyNeRF</a>
-          </p>
-          <p>
-            There are probably many more by the time you are reading this. Check out <a href="https://dellaert.github.io/NeRF/" target="_blank">Frank Dellart's survey on recent NeRF papers</a>, and <a href="https://github.com/yenchenlin/awesome-NeRF" target="_blank">Yen-Chen Lin's curated list of NeRF papers</a>.
-          </p>
-        </div>
-      </div>
-    </div>
-    <!--/ Concurrent Work. -->
-  </div>
-</section>
-<section class="section" id="BibTeX">
-  <div class="container is-max-desktop content">
-    <h2 class="title">BibTeX</h2>
-    <pre><code>@article{park2021nerfies,
-  author    = {Park, Keunhong and Sinha, Utkarsh and Barron, Jonathan T. and Bouaziz, Sofien and Goldman, Dan B and Seitz, Steven M. and Martin-Brualla, Ricardo},
-  title     = {Nerfies: Deformable Neural Radiance Fields},
-  journal   = {ICCV},
-  year      = {2021},
-}</code></pre>
-  </div>
-</section>
-<footer class="footer">
-  <div class="container">
-    <div class="content has-text-centered">
-      <a class="icon-link" target="_blank"
-         href="./static/videos/nerfies_paper.pdf">
-        <i class="fas fa-file-pdf"></i>
-      </a>
-      <a class="icon-link" href="https://github.com/keunhong" target="_blank" class="external-link" disabled>
-        <i class="fab fa-github"></i>
-      </a>
-    </div>
-    <div class="columns is-centered">
-      <div class="column is-8">
-        <div class="content">
-          <p>
-            This website is licensed under a <a rel="license" target="_blank"
-                                                href="http://creativecommons.org/licenses/by-sa/4.0/">Creative
-            Commons Attribution-ShareAlike 4.0 International License</a>.
-          </p>
-          <p>
-            This means you are free to borrow the <a target="_blank"
-              href="https://github.com/nerfies/nerfies.github.io">source code</a> of this website,
-            we just ask that you link back to this page in the footer.
-            Please remember to remove the analytics code included in the header of the website which
-            you do not want on your website.
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</footer>
-</body>
-</html>

node_server/Dockerfile ADDED Viewed

	@@ -0,0 +1,17 @@

+FROM node:10-alpine
+RUN mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app
+WORKDIR /home/node/app
+COPY package*.json ./
+USER node
+RUN npm install
+COPY --chown=node:node . .
+EXPOSE 3000
+CMD [ "node", "server.js" ]

node_server/package.json ADDED Viewed

	@@ -0,0 +1,15 @@

+{
+  "name": "image-viewer",
+  "version": "1.0.0",
+  "description": "A simple image viewer using Node.js and Viewer.js",
+  "main": "server.js",
+  "dependencies": {
+    "express": "^4.17.1",
+    "ejs": "^3.1.6",
+    "got": "^14.4.5",
+    "viewerjs": "^1.11.7"
+  },
+  "scripts": {
+    "start": "node server.js"
+  }
+}

node_server/server.js ADDED Viewed

	@@ -0,0 +1,39 @@

+const express = require('express');
+const http = require('http');
+const app = express();
+const port = 3000;
+app.set('view engine', 'ejs');
+app.use(express.static('views'));
+app.get('/', (req, res) => {
+  res.render('index', {'search_input': '', 'images': {'images': []}});
+});
+app.get('/query', (req, res) => {
+  let search_input = req.query.search_input;
+  http
+  .get(`http://pclis:5000/images?search_input=` + search_input, resp => {
+    let data = "";
+    // A chunk of data has been received.
+    resp.on("data", chunk => {
+      data += chunk;
+    });
+    // The whole response has been received. Print out the result.
+    resp.on("end", () => {
+      images_json = JSON.parse(data);
+      res.render('index', {'search_input': search_input,
+                           'images': images_json});
+    });
+  })
+  .on("error", err => {
+    console.log("Error: " + err.message);
+  });
+});
+app.listen(port, () => {
+  console.log(`Server running at http://localhost:${port}`);
+});

node_server/views/index.ejs ADDED Viewed

	@@ -0,0 +1,31 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>CLIP Image Search</h1>
+    <form id="form" role="search" style="margin: 1em;" action="/query">
+        <input type="search" id="query" name="search_input"
+         placeholder="Search..."
+         aria-label="Search through site content" value="<%= search_input %>">
+        <button>Search</button>
+    </form>
+    <% if (images.images.length>0) { %>
+        <% images.images.forEach((item) => { %>
+            <div class="responsive">
+                <div class="gallery">
+                    <img src="<%= item %>" width="600" height="400">
+                </div>
+            </div>
+        <% }); %>
+    <% } else { %>
+        <p>Type a query and press Search...</p>
+    <% } %>
+</body>
+</html>

node_server/views/style.css ADDED Viewed

	@@ -0,0 +1,64 @@

+div.gallery {
+    border: 1px solid #ccc;
+}
+div.gallery:hover {
+    border: 1px solid #777;
+}
+div.gallery img {
+    width: 100%;
+    height: auto;
+}
+div.desc {
+    padding: 15px;
+    text-align: center;
+}
+* {
+    box-sizing: border-box;
+}
+.responsive {
+    padding: 0 6px;
+    float: left;
+    width: 24.99999%;
+}
+@media only screen and (max-width: 700px) {
+    .responsive {
+        width: 49.99999%;
+        margin: 6px 0;
+    }
+}
+@media only screen and (max-width: 500px) {
+    .responsive {
+        width: 100%;
+    }
+}
+form {
+    background-color: #4654e1;
+    width: 300px;
+    height: 44px;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+input {
+    all: unset;
+    font: 16px system-ui;
+    color: #fff;
+    height: 100%;
+    width: 100%;
+    padding: 6px 10px;
+}
+::placeholder {
+    color: #fff;
+    opacity: 0.7;
+}

python_clip_image_search/Dockerfile ADDED Viewed

	@@ -0,0 +1,30 @@

+# Use an official Python runtime as the base image
+FROM pytorch/pytorch:2.5.1-cuda12.4-cudnn9-runtime
+# It is necessary to install git to run the pip install -r requirements.txt
+RUN apt-get update && apt-get install -y git
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+	PATH=/home/user/.local/bin:$PATH
+# Set the working directory in the container
+WORKDIR $HOME/app
+# Copy the current directory contents into the container at /app
+COPY --chown=user . $HOME/app
+RUN pip install -r requirements.txt
+# FROM base AS test
+# CMD ["python", "-m", "pdb", "test_cli_search_engine.py"]
+# FROM base AS run
+# COPY . .
+# CMD ["python", "app.py"]
+COPY . .
+EXPOSE 5000
+CMD ["python", "server.py"]

python_clip_image_search/config.cfg ADDED Viewed

	@@ -0,0 +1,7 @@

+[SERVER]
+host_ip_address = 0.0.0.0
+port_number = 7860
+[SEARCH_ENGINE]
+image_root_dir = ./dataset
+csv_file_path = ./image_features.csv

python_clip_image_search/dataset/000000000139.jpg ADDED Viewed

python_clip_image_search/dataset/000000000285.jpg ADDED Viewed

python_clip_image_search/dataset/000000000632.jpg ADDED Viewed

python_clip_image_search/dataset/000000000724.jpg ADDED Viewed

python_clip_image_search/dataset/000000000776.jpg ADDED Viewed

python_clip_image_search/dataset/000000000785.jpg ADDED Viewed

python_clip_image_search/dataset/000000000802.jpg ADDED Viewed

python_clip_image_search/dataset/000000000872.jpg ADDED Viewed

python_clip_image_search/dataset/000000000885.jpg ADDED Viewed

python_clip_image_search/dataset/000000001000.jpg ADDED Viewed

python_clip_image_search/dataset/000000001268.jpg ADDED Viewed

python_clip_image_search/dataset/000000001296.jpg ADDED Viewed

python_clip_image_search/dataset/000000001353.jpg ADDED Viewed

python_clip_image_search/dataset/000000001425.jpg ADDED Viewed

python_clip_image_search/dataset/000000001490.jpg ADDED Viewed

python_clip_image_search/dataset/000000001503.jpg ADDED Viewed

python_clip_image_search/dataset/000000001532.jpg ADDED Viewed

python_clip_image_search/dataset/000000001584.jpg ADDED Viewed

python_clip_image_search/dataset/000000001675.jpg ADDED Viewed

python_clip_image_search/dataset/000000001761.jpg ADDED Viewed

python_clip_image_search/dataset/000000001818.jpg ADDED Viewed

python_clip_image_search/dataset/000000001993.jpg ADDED Viewed

python_clip_image_search/dataset/000000002006.jpg ADDED Viewed

python_clip_image_search/dataset/000000002149.jpg ADDED Viewed

python_clip_image_search/dataset/000000002153.jpg ADDED Viewed

python_clip_image_search/dataset/000000002157.jpg ADDED Viewed

python_clip_image_search/dataset/000000002261.jpg ADDED Viewed

python_clip_image_search/dataset/000000002299.jpg ADDED Viewed

python_clip_image_search/dataset/000000002431.jpg ADDED Viewed

python_clip_image_search/dataset/000000002473.jpg ADDED Viewed

python_clip_image_search/dataset/000000002532.jpg ADDED Viewed

python_clip_image_search/dataset/000000002587.jpg ADDED Viewed

python_clip_image_search/dataset/000000002592.jpg ADDED Viewed

python_clip_image_search/dataset/000000002685.jpg ADDED Viewed

python_clip_image_search/dataset/000000002923.jpg ADDED Viewed

python_clip_image_search/dataset/000000003156.jpg ADDED Viewed

python_clip_image_search/dataset/000000003255.jpg ADDED Viewed

python_clip_image_search/dataset/000000003501.jpg ADDED Viewed

python_clip_image_search/dataset/000000003553.jpg ADDED Viewed

python_clip_image_search/dataset/000000003661.jpg ADDED Viewed