Update versions to fix pex and npm build (#276)

* Update versions to fix pex and npm build

* update all front deps

* standard linting

* Stop testing 3.7, test 3.11 instead

* 3.10 instead of 3.11

* actual 3.10

Author: rom1504

.github/workflows/ci.yml

@@ -31,7 +31,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        python-version: [3.7, 3.8]
+        python-version: ["3.8", "3.10"]
 
     steps:
     - uses: actions/checkout@v2

.github/workflows/front-build.yml

@@ -13,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [18.x]
 
     steps:
     - uses: actions/checkout@v2

.github/workflows/front-publish.yml

@@ -13,7 +13,7 @@ jobs:
     - name: Set up Node.js
       uses: actions/setup-node@master
       with:
-        node-version: 14.0.0
+        node-version: 18.0.0
     - run: cd front && npm install
     - run: cd front && npm run build
     - run: cd front && npm test

front/package.json

@@ -5,7 +5,7 @@
   "main": "server.js",
   "dependencies": {
     "compression": "^1.7.4",
-    "express": "^4.17.1"
+    "express": "^4.18.2"
   },
   "repository": {
     "type": "git",
@@ -15,29 +15,29 @@
     "clip-retrieval-front": "./server.js"
   },
   "devDependencies": {
-    "@vaadin/vaadin-button": "^2.4.0",
-    "@vaadin/vaadin-combo-box": "^6.0.1",
-    "@vaadin/vaadin-select": "^3.0.0",
-    "@webcomponents/webcomponentsjs": "^2.2.4",
-    "bootstrap": "^4.5.2",
-    "dateformat": "^3.0.3",
+    "@vaadin/vaadin-button": "^23.3.14",
+    "@vaadin/vaadin-combo-box": "^23.3.14",
+    "@vaadin/vaadin-select": "^23.3.14",
+    "@webcomponents/webcomponentsjs": "^2.8.0",
+    "bootstrap": "^5.2.3",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.8.1",
+    "dateformat": "^5.0.3",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.1",
+    "http-server": "^14.1.1",
     "json-bigint": "^1.0.0",
-    "lit-element": "^2.0.1",
-    "lit-html": "^1.0.0",
-    "clean-webpack-plugin": "^0.1.19",
-    "copy-webpack-plugin": "^4.5.2",
-    "css-loader": "^2.1.0",
-    "file-loader": "^3.0.1",
-    "html-webpack-plugin": "^4.0.0-alpha",
-    "http-server": "^0.11.1",
-    "raw-loader": "^1.0.0",
-    "standard": "^12.0.1",
-    "style-loader": "^0.23.1",
-    "to-string-loader": "^1.1.5",
-    "webpack": "^4.14.0",
-    "webpack-cli": "^3.0.8",
-    "webpack-dev-server": "^3.1.4",
-    "webpack-merge": "^4.1.3"
+    "lit-element": "^3.3.2",
+    "lit-html": "^2.7.4",
+    "raw-loader": "^4.0.2",
+    "standard": "^17.0.0",
+    "style-loader": "^3.3.3",
+    "to-string-loader": "^1.2.0",
+    "webpack": "^5.84.1",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.0",
+    "webpack-merge": "^5.9.0"
   },
   "scripts": {
     "build": "webpack --env production",

front/src/clip-front.js

@@ -13,7 +13,7 @@ class ClipFront extends LitElement {
     })
   }
 
-  init () {
+  async init () {
     const urlParams = new URLSearchParams(window.location.search)
     const back = urlParams.get('back')
     const index = urlParams.get('index')
@@ -61,16 +61,17 @@ class ClipFront extends LitElement {
     this.hideDuplicateImages = true
     this.aestheticScore = ''
     this.aestheticWeight = '0.5'
-    this.initIndices()
+    await this.initIndices()
+    this.postInit()
   }
 
   setBackendToDefault () {
     this.backendHost = this.defaultBackend
     this.initIndices(true)
   }
 
-  initIndices (forceChange) {
-    this.service.getIndices().then(l => {
+  async initIndices (forceChange) {
+    await this.service.getIndices().then(l => {
       this.indices = l
       if (forceChange || this.currentIndex === '') {
         this.currentIndex = this.indices[0]
@@ -109,7 +110,7 @@ class ClipFront extends LitElement {
     }
   }
 
-  firstUpdated () {
+  postInit () {
     const searchElem = this.shadowRoot.getElementById('searchBar')
     searchElem.addEventListener('keyup', e => { if (e.keyCode === 13) { this.textSearch() } })
     const productsElement = this.shadowRoot.getElementById('products')
@@ -234,7 +235,7 @@ class ClipFront extends LitElement {
 
   async download () {
     function downloadFile (filename, text) {
-      var element = document.createElement('a')
+      const element = document.createElement('a')
       element.setAttribute('href', 'data:application/json;charset=utf-8,' + encodeURIComponent(text))
       element.setAttribute('download', filename)
 
@@ -288,6 +289,7 @@ class ClipFront extends LitElement {
     this.setUrlParams()
     setTimeout(() => this.initialScroll(), 0)
   }
+
   static get styles () {
     return css`
     input:-webkit-autofill,
@@ -458,7 +460,7 @@ class ClipFront extends LitElement {
   }
 
   updateImage (file) {
-    var reader = new FileReader()
+    const reader = new FileReader()
     reader.readAsDataURL(file)
     reader.onload = () => {
       this.image = reader.result.split(',')[1]
@@ -470,8 +472,8 @@ class ClipFront extends LitElement {
 
   renderImage (image) {
     let src
-    if (image['image'] !== undefined) {
-      src = `data:image/png;base64, ${image['image']}`
+    if (image.image !== undefined) {
+      src = `data:image/png;base64, ${image.image}`
     }
     if (image[this.urlColumn] !== undefined) {
       src = image[this.urlColumn]
@@ -486,24 +488,29 @@ class ClipFront extends LitElement {
     return html`
     <figure style="margin:5px;display:table" 
     style=${'margin:1px; ' + (this.blacklist[src] !== undefined ? 'display:none' : 'display:inline')}>
-     ${this.displaySimilarities ? html`<p>${(image['similarity']).toFixed(4)}</p>` : ``}
-      ${image['caption'] !== undefined
-    ? html`<img src="assets/search.png" class="subTextSearch" @click=${() => { this.text = image['caption']; this.textSearch() }} />` : ``}
+     ${this.displaySimilarities ? html`<p>${(image.similarity).toFixed(4)}</p>` : ''}
+      ${image.caption !== undefined
+    ? html`<img src="assets/search.png" class="subTextSearch" @click=${() => { this.text = image.caption; this.textSearch() }} />`
+: ''}
      
      <img src="assets/image-search.png" class="subImageSearch" @click=${() => {
-    if (image['image'] !== undefined) {
-      this.image = image['image']
+    if (image.image !== undefined) {
+      this.image = image.image
     } else if (image[this.urlColumn] !== undefined) {
       this.imageUrl = image[this.urlColumn]
     }
   }} />
-      <img class="pic" src="${src}" alt="${image['caption'] !== undefined ? image['caption'] : ''}"" 
-      title="${image['caption'] !== undefined ? image['caption'] : ''}"
+      <img class="pic" src="${src}" alt="${image.caption !== undefined ? image.caption : ''}"" 
+      title="${image.caption !== undefined ? image.caption : ''}"
       @error=${() => { this.blacklist = { ...this.blacklist, ...{ [src]: true } } }} />
       
-      ${this.displayCaptions ? html`<figcaption>
-      ${image['caption'] !== undefined && image['caption'].length > 50 &&
-      !this.displayFullCaptions ? image['caption'].substr(0, 50) + '...' : image['caption']}</figcaption>` : ''}
+      ${this.displayCaptions
+? html`<figcaption>
+      ${image.caption !== undefined && image.caption.length > 50 &&
+      !this.displayFullCaptions
+? image.caption.substr(0, 50) + '...'
+: image.caption}</figcaption>`
+: ''}
     
     
     </figure>
@@ -525,8 +532,11 @@ class ClipFront extends LitElement {
   }
 
   render () {
+    if (this.images === undefined) {
+      return html`<div id="all"></div>`
+    }
     const preFiltered = this.images
-      .filter(image => image['caption'] !== undefined || image[this.urlColumn] !== undefined || image['image'] !== undefined)
+      .filter(image => image.caption !== undefined || image[this.urlColumn] !== undefined || image.image !== undefined)
     const filteredImages = this.hideDuplicateUrls ? this.filterDuplicateUrls(preFiltered) : preFiltered
 
     return html`
@@ -546,8 +556,8 @@ class ClipFront extends LitElement {
     Backend url: <br /><input type="text" style="width:80px" value=${this.backendHost} @input=${e => { this.backendHost = e.target.value }}/><br />
     Index: <br /><select style="margin-bottom:50px;" @input=${e => { this.currentIndex = e.target.value }}>${this.indices.map(index =>
   html`<option value=${index} ?selected=${index === this.currentIndex}>${index}</option>`)}</select><br />
-      ${this.image !== undefined ? html`<img width="100px" src="data:image/png;base64, ${this.image}"" /><br />` : ``}
-      ${this.imageUrl !== undefined ? html`<img width="100px" src="${this.imageUrl}"" /><br />` : ``}
+      ${this.image !== undefined ? html`<img width="100px" src="data:image/png;base64, ${this.image}"" /><br />` : ''}
+      ${this.imageUrl !== undefined ? html`<img width="100px" src="${this.imageUrl}"" /><br />` : ''}
       <a href="https://github.com/rom1504/clip-retrieval">Clip retrieval</a> works by converting the text query to a CLIP embedding
       , then using that embedding to query a knn index of clip image embedddings<br /><br />
       <label>Display captions<input type="checkbox" ?checked="${this.displayCaptions}" @click=${() => { this.displayCaptions = !this.displayCaptions }} /></label><br />

front/src/clip-service.js

@@ -8,43 +8,43 @@ export default class ClipService {
   }
 
   async getIndices () {
-    const result = JsonBigint.parse(await (await fetch(this.backend + `/indices-list`, {
+    const result = JsonBigint.parse(await (await fetch(this.backend + '/indices-list', {
     })).text())
 
     return result
   }
 
   async callClipService (text, image, imageUrl, embeddingInput, modality, numImages, indexName, numResultIds, useMclip, hideDuplicateImages, useSafetyModel, useViolenceDetector, aestheticScore, aestheticWeight) {
     console.log('calling', text, numImages)
-    const result = JsonBigint.parse(await (await fetch(this.backend + `/knn-service`, {
+    const result = JsonBigint.parse(await (await fetch(this.backend + '/knn-service', {
       method: 'POST',
       body: JSON.stringify({
         text,
         image,
-        'image_url': imageUrl,
-        'embedding_input': embeddingInput,
+        image_url: imageUrl,
+        embedding_input: embeddingInput,
         modality,
-        'num_images': numImages,
-        'indice_name': indexName,
-        'num_result_ids': numResultIds,
-        'use_mclip': useMclip,
-        'deduplicate': hideDuplicateImages,
-        'use_safety_model': useSafetyModel,
-        'use_violence_detector': useViolenceDetector,
-        'aesthetic_score': aestheticScore,
-        'aesthetic_weight': aestheticWeight
+        num_images: numImages,
+        indice_name: indexName,
+        num_result_ids: numResultIds,
+        use_mclip: useMclip,
+        deduplicate: hideDuplicateImages,
+        use_safety_model: useSafetyModel,
+        use_violence_detector: useViolenceDetector,
+        aesthetic_score: aestheticScore,
+        aesthetic_weight: aestheticWeight
       })
     })).text())
 
     return result
   }
 
   async getMetadata (ids, indexName) {
-    const result = JsonBigint.parse(await (await fetch(this.backend + `/metadata`, {
+    const result = JsonBigint.parse(await (await fetch(this.backend + '/metadata', {
       method: 'POST',
       body: JSON.stringify({
         ids,
-        'indice_name': indexName
+        indice_name: indexName
       })
     })).text())
 

front/webpack.config.js

@@ -1,10 +1,10 @@
 'use strict'
 
 const { resolve, join } = require('path')
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const CleanWebpackPlugin = require('clean-webpack-plugin')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 
 const ENV = process.argv.find(arg => arg.includes('production'))
   ? 'production'
@@ -28,18 +28,15 @@ const assets = [
 const polyfills = [
   {
     from: resolve(`${webcomponentsjs}/webcomponents-*.js`),
-    to: join(OUTPUT_PATH, 'vendor'),
-    flatten: true
+    to: join(OUTPUT_PATH, 'vendor')
   },
   {
     from: resolve(`${webcomponentsjs}/bundles/*.js`),
-    to: join(OUTPUT_PATH, 'vendor', 'bundles'),
-    flatten: true
+    to: join(OUTPUT_PATH, 'vendor', 'bundles')
   },
   {
     from: resolve(`${webcomponentsjs}/custom-elements-es5-adapter.js`),
-    to: join(OUTPUT_PATH, 'vendor'),
-    flatten: true
+    to: join(OUTPUT_PATH, 'vendor')
   }
 ]
 
@@ -79,19 +76,16 @@ const developmentConfig = merge([
   {
     devtool: 'cheap-module-source-map',
     plugins: [
-      new CopyWebpackPlugin([...polyfills, ...assets]),
+      new CopyWebpackPlugin({ patterns: [...polyfills, ...assets] }),
       new HtmlWebpackPlugin({
         template: INDEX_TEMPLATE
       })
     ],
 
     devServer: {
-      contentBase: OUTPUT_PATH,
       compress: true,
-      overlay: true,
       port: 3005,
       historyApiFallback: true,
-      disableHostCheck: true,
       host: '0.0.0.0'
     }
   }
@@ -101,8 +95,8 @@ const productionConfig = merge([
   {
     devtool: 'nosources-source-map',
     plugins: [
-      new CleanWebpackPlugin([OUTPUT_PATH], { verbose: true }),
-      new CopyWebpackPlugin([...polyfills, ...assets]),
+      new CleanWebpackPlugin(),
+      new CopyWebpackPlugin({ patterns: [...polyfills, ...assets] }),
       new HtmlWebpackPlugin({
         template: INDEX_TEMPLATE,
         filename: 'index.html',
@@ -118,9 +112,10 @@ const productionConfig = merge([
 ])
 
 module.exports = mode => {
-  if (mode === 'production') {
-    return merge(commonConfig, productionConfig, { mode })
+  if (mode.production) {
+    return merge(commonConfig, productionConfig, { mode: 'production' })
   }
+  const config = merge(commonConfig, developmentConfig, { mode: 'development' })
 
-  return merge(commonConfig, developmentConfig, { mode })
+  return config
 }

requirements.txt

@@ -22,3 +22,5 @@ open-clip-torch>=2.0.0,<3.0.0
 requests>=2.27.1,<3
 aiohttp>=3.8.1,<4
 multilingual-clip>=1.0.10,<2
+urllib3<2
+scipy<1.9.2

setup.py

@@ -48,6 +48,6 @@ def _read_reqs(relpath):
             "Intended Audience :: Developers",
             "Topic :: Scientific/Engineering :: Artificial Intelligence",
             "License :: OSI Approved :: MIT License",
-            "Programming Language :: Python :: 3.6",
+            "Programming Language :: Python :: 3.8",
         ],
     )