Bug fixes & update /about

imhashdb-frontend/package.json

@@ -35,9 +35,9 @@
     "@angular/cli": "~9.1.1",
     "@angular/compiler-cli": "~9.1.1",
     "@angular/language-service": "~9.1.1",
-    "@types/node": "~13.11.1",
     "@types/jasmine": "~3.5.10",
     "@types/jasminewd2": "~2.0.8",
+    "@types/node": "~13.11.1",
     "codelyzer": "~5.2.2",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~5.0.1",

imhashdb-frontend/src/app/about/about.component.html

@@ -9,6 +9,13 @@
     <app-git-repo name="fastimagehash (C/C++)" path="simon987/fastimagehash"></app-git-repo>
     <app-git-repo name="fastimagehash-go (C/go)" path="simon987/fastimagehash-go"></app-git-repo>
 
+    <p>Perceptual hashing is a technique to compute the fingerprint of an image and save it as a 'hash'. The binary
+      hash is just a string of 1s and 0s and is much smaller than the original image. Adding a watermark, cropping,
+      changing
+      the colors or resizing a picture will generally only change its hash by a few bits.</p>
+
+    <p>Here are examples of well-known perceptual hashing functions, with different resolutions (8B, 32B and 128B):</p>
+
     <figure>
       <img src="assets/dhash.png">
       <figcaption>Difference hash (dhash)</figcaption>
@@ -63,22 +70,38 @@ mov     rax, [hash1]
 xor     rax, [hash2]  ; rax = hash1 XOR hash2 = 00100011
 popcnt  rax, rax      ; rax = popcount(00100011) = 3</code></pre>
 
-    <h2>Project overview</h2>
+    <figure>
+      <img src="assets/image_hash.png">
+      <figcaption>Image hashes stored in a SQL database</figcaption>
+    </figure>
 
+    <h2>Project overview</h2>
 
     <app-git-repo name="imhashdb (go)" path="simon987/imhashdb"></app-git-repo>
     <app-git-repo name="imhashdb-frontend (Angular)" path="simon987/imhashdb-frontend"></app-git-repo>
 
-    <figure>
-      <img src="assets/schema.png">
-      <figcaption>Database schema (some hashes omitted)</figcaption>
-    </figure>
+    <p>
+      A number of Web crawler scripts send items to a message queue, then a 'hasher' daemon receives the items, fetches
+      the picture, computes the hashes for a dozen different hash configs. Then the metadata
+      is saved alongside the binary hashes in the PostgreSQL database.
+      The simple web app lets the user upload a picture and (asynchronously) query the whole
+      database.
+    </p>
+
+    <p>Below is an overview of the components involved in a single query.</p>
 
     <figure>
       <img src="assets/diagram.png">
       <figcaption>High level overview</figcaption>
     </figure>
 
+    <figure>
+      <img src="assets/schema.png">
+      <figcaption>Database schema (some hashes omitted)</figcaption>
+    </figure>
+
+    <p>Examples of projects that can be used to scrape images in real time.</p>
+
     <app-git-repo name="reddit_feed (Python)" path="simon987/reddit_feed"></app-git-repo>
     <app-git-repo name="chan_feed (Python)" path="simon987/chan_feed"></app-git-repo>
 

imhashdb-frontend/src/app/api.service.ts

@@ -9,7 +9,7 @@ import * as _ from "lodash";
 export class ApiService {
 
   // public url: string = window.location.protocol + "//" + window.location.host + "/api";
-  public url: string = window.location.protocol + "//" + "192.168.1.57:8080" + "/api";
+  public url: string = window.location.protocol + "//" + "127.0.0.1:8080" + "/api";
 
   private options: {
     withCredentials: true,
@@ -20,8 +20,7 @@ export class ApiService {
   }
 
   hash(data: string) {
-    return from([JSON.parse('{"dhash8":{"size":8,"bytes":"1UOImJyelpY="},"dhash16":{"size":16,"bytes":"smB5M+MVSlZFZslmklOiU+Bj7GC4YW1naUNZ4yznWdc="},"dhash32":{"size":32,"bytes":"bV2VGElVixyjD48XxTSXB4ftshcdZpIT2XWeG0lomhtVNBSdNXS+HMfxtBiBoT0YReYlmZLAH7sQyy+7DJgOuQO4Dr2CeUudEHkoPHBdRDyE7kc8wq8mPuI+fT7ibDc6pWoLOlVUX3qXYU94zSKfuGlWNrqTnGW6k2VX+ZKTpnk="},"mhash8":{"size":8,"bytes":"v38/MzA4oIA="},"mhash16":{"size":16,"bytes":"/0f3d/53/1b/R78HPwcFD4AOgQ/gA8APAM4AzADKAMY="},"mhash32":{"size":32,"bytes":"+v+/cb79P3Be/j5+vv8/Pj7vLz/63Tcf//94f///fPv//3sw//9/Mf/vvxD/j3kw/w5/AP8PfgB/gH8AEIB/IACAeCAAwH4gA8B/AAfQHyAB+A8ABdxvAAR4fwAMwP4ADgB+AAgAfOAEANjwEFW08IIoZPAEIc/wBAA88AQAKOA="},"phash8":{"size":8,"bytes":"24MnOBjPszE="},"phash16":{"size":16,"bytes":"2yKDsCdsOE4Y/M+o8wkxZ0iG45+ePUDbJPmbzQd7BHw="},"phash32":{"size":32,"bytes":"2yLmAIOwBTknbGTpOE5r5hj8uffPKM3E8wm9TTEnCXZIhp02458RH549IwZA24Y4JPg9mZvNOcEHe2bPBPzPGDDgB+3w49nO4eM282/gZMLPRpK9wD4uwgaf2zXPJGzLL+CTLgjMP5i0BRm2bBIz/E2T7ID/JPg9vBnyzfwZMIg="},"whash8haar":{"size":8,"bytes":"v38/MzA4oIA="},"whash16haar":{"size":16,"bytes":"/8f3d/53/3b/R78HPwcFD4AOgQ/gA8APAM4AzADOAMY="},"whash32haar":{"size":32,"bytes":"+v+/cb79P3Be/j5+vv8/Pj7vLz/63Tcf//94f///fPv//3sw//9/Mf/vvxD/j3kw/w5/AP8PfgB/gH8AEIB/IACAeCAAwH4gA8B/AAfQHyAB+A8ABdxvAAR4fwAMwP4ADgB+AAgAfOAEANjwEFW08IIoZPAEIc/wBAA88AQAKOA="}}')])
-    // return this.http.post(this.url + "/hash", {data: data}, this.options);
+    return this.http.post(this.url + "/hash", {data: data}, this.options);
   }
 
   query(hashType: string, hash: string, distance: number, limit: number, offset: number) {
@@ -39,7 +38,6 @@ export class ApiService {
           im["md5"] = this.b64.toHex(im["md5"])
           im["meta"].forEach(ihm => {
             ihm["url"] = "https://" + ihm["url"]
-            ihm["meta"]["meta"] = JSON.parse(atob(ihm["meta"]["meta"]))
             ihm["meta"]["retrieved_at"] *= 1000;
           });
         });
@@ -57,6 +55,11 @@ export class ApiService {
         "foreground": "#EEEEEE",
         "description": "Reddit"
       },
+      "4chan": {
+        "background": "#006500",
+        "foreground": "#EEEEEE",
+        "description": "4chan"
+      },
       "imgur": {
         "background": "#1BB76E",
         "foreground": "#000000",

imhashdb-frontend/src/app/app-routing.module.ts

@@ -1,12 +1,10 @@
 import {NgModule} from "@angular/core";
 import {Routes, RouterModule} from "@angular/router";
 import {IndexComponent} from "./index/index.component";
-import {ContactComponent} from "./contact/contact.component";
 import {AboutComponent} from "./about/about.component";
 
 const routes: Routes = [
   {path: "", component: IndexComponent},
-  {path: "contact", component: ContactComponent},
   {path: "about", component: AboutComponent},
 ];
 

imhashdb-frontend/src/app/app.component.html

@@ -5,8 +5,6 @@
             [routerLink]="''">{{"nav.title" | translate}}</button>
     <button mat-button [class.mat-active]="router.url === '/about'" class="nav-link"
             [routerLink]="'about'">{{"nav.about" | translate}}</button>
-    <button mat-button [class.mat-active]="router.url === '/about'" class="nav-link"
-            [routerLink]="'contact'">{{"nav.contact" | translate}}</button>
   </div>
   <div class="small-nav">
     <button mat-button [matMenuTriggerFor]="smallNav">
@@ -17,8 +15,6 @@
               [routerLink]="''">{{"nav.title" | translate}}</button>
       <button mat-button [class.mat-active]="router.url === '/about'" class="nav-link"
               [routerLink]="'about'">{{"nav.about" | translate}}</button>
-      <button mat-button [class.mat-active]="router.url === '/about'" class="nav-link"
-              [routerLink]="'contact'">{{"nav.contact" | translate}}</button>
     </mat-menu>
   </div>
 

imhashdb-frontend/src/app/app.module.ts

@@ -12,7 +12,6 @@ import {MatButtonModule} from "@angular/material/button";
 import {MatIconModule} from "@angular/material/icon";
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {IndexComponent} from './index/index.component';
-import {ContactComponent} from './contact/contact.component';
 import {MatCardModule} from "@angular/material/card";
 import {MatFormFieldModule} from "@angular/material/form-field";
 import {MatInputModule} from "@angular/material/input";
@@ -43,7 +42,6 @@ export function createTranslateLoader(http: HttpClient) {
   declarations: [
     AppComponent,
     IndexComponent,
-    ContactComponent,
     SearchResultComponent,
     MetaComponent,
     MetaDialogComponent,

imhashdb-frontend/src/app/contact/contact.component.html

@@ -1 +0,0 @@
-<p>contact works!</p>

imhashdb-frontend/src/app/contact/contact.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from "@angular/core";
-
-@Component({
-  selector: 'app-contact',
-  templateUrl: './contact.component.html',
-  styleUrls: ['./contact.component.css']
-})
-export class ContactComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

imhashdb-frontend/src/app/git-repo/git-repo.component.html

@@ -1,8 +1,6 @@
 <div class="git-repo">
   <mat-icon>chevron_right</mat-icon>
-  <span>{{name}}</span>
-  &nbsp;
   <a target="_blank" href="https://github.com/{{path}}">
-    <img alt="GitHub stars"src="https://shields.simon987.net/github/stars/{{path}}?style=social">
+    <span>{{name}}</span>
   </a>
 </div>

imhashdb-frontend/src/app/index/index.component.ts

@@ -23,9 +23,9 @@ export class IndexComponent implements OnInit {
   }
 
   onUpload() {
-    this.query.emit("test")
-    this.showResult = true;
-    return;
+    // this.query.emit("test")
+    // this.showResult = true;
+    // return;
 
     const uploadElem = document.getElementById("upload") as HTMLInputElement;
     uploadElem.click()

imhashdb-frontend/src/app/search-result/search-result.component.ts

@@ -83,20 +83,34 @@ export class SearchResultComponent implements OnInit, OnDestroy {
     return _.uniq(im["meta"].map(m => m["url"]))
   }
 
+  metaProject(meta) {
+    const tokens = meta["meta"]["id"].split(".");
+    if (tokens.length === 5) {
+      return tokens[1];
+    } else {
+      return tokens[0];
+    }
+  }
+
   metaColor(meta) {
-    return this.api.metaInfo()[meta["meta"]["id"].split(".")[0]]["foreground"]
+    return this.api.metaInfo()[this.metaProject(meta)]["foreground"]
   }
 
   metaBackgroundColor(meta) {
-    return this.api.metaInfo()[meta["meta"]["id"].split(".")[0]]["background"]
+    return this.api.metaInfo()[this.metaProject(meta)]["background"]
   }
 
   metaDescription(meta) {
-    return this.api.metaInfo()[meta["meta"]["id"].split(".")[0]]["description"]
+    return this.api.metaInfo()[this.metaProject(meta)]["description"]
   }
 
   shortMetaName(meta) {
-    return meta["meta"]["id"].split(".").slice(0, -1).join(".");
+    const tokens = meta["meta"]["id"].split(".");
+    if (tokens.length === 5) {
+      return tokens.slice(1, -1).join(".");
+    } else {
+      return tokens.slice(0, -1).join(".");
+    }
   }
 
   metaChipList(im) {

imhashdb-frontend/src/assets/i18n/en.json

@@ -2,8 +2,7 @@
   "nav": {
     "title": "imhashdb",
     "lang_select": "Language",
-    "about": "About",
-    "contact": "Contact"
+    "about": "About"
   },
   "index": {
     "title": "imhashdb",

imhashdb-frontend/src/index.html

@@ -11,6 +11,8 @@
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+  <meta name="referrer" content="no-referrer" />
 </head>
 <body class="mat-typography">
 <app-root></app-root>

imhashdb-frontend/src/styles.css

@@ -80,3 +80,7 @@ body {
     margin: 0 !important;
   }
 }
+
+a {
+  color: #00E5FF;
+}