@things-factory/reference-app 4.0.4 → 4.0.5

package/client/bootstrap.js

@@ -1,6 +1,7 @@
 import '@things-factory/auth-ui' /* for domain-switch */
 import '@things-factory/barcode-base' /* for <default-label-printer-setting-let> */
 import '@things-factory/notification' /* for notification-badge */
+import './components/ocr-viewpart'
 
 import { TOOL_POSITION, VIEWPART_POSITION, appendViewpart, toggleOverlay } from '@things-factory/layout-base'
 import { getEditor, registerEditor, registerRenderer } from '@operato/data-grist'
@@ -134,6 +135,24 @@ export default function bootstrap() {
   })
 
   /* setting app-tools */
+  store.dispatch({
+    type: APPEND_APP_TOOL,
+    tool: {
+      name: 'ocr-toggler',
+      template: html`
+        <mwc-icon
+          @click=${e => {
+            toggleOverlay('ocr-viewpart', {
+              backdrop: false
+            })
+          }}
+          >camera_enhance
+        </mwc-icon>
+      `,
+      position: TOOL_POSITION.REAR
+    }
+  })
+
   store.dispatch({
     type: APPEND_APP_TOOL,
     tool: {
@@ -162,6 +181,17 @@ export default function bootstrap() {
     position: VIEWPART_POSITION.HEADERBAR
   })
 
+  appendViewpart({
+    name: 'ocr-viewpart',
+    viewpart: {
+      show: false,
+      hovering: false,
+      resizable: true,
+      template: html` <ocr-viewpart style="min-width: 300px; height: 100%; width: 50vw;"></ocr-viewpart> `
+    },
+    position: VIEWPART_POSITION.ASIDEBAR
+  })
+
   appendViewpart({
     name: 'notification',
     viewpart: {

package/client/components/camera-capturer.js

@@ -119,8 +119,16 @@ export class CameraCapturer extends LitElement {
                   - ${file.name}
                   <mwc-icon
                     @click=${e => {
-                      this._files.splice(this._files.indexOf(file), 1)
-                      this.requestUpdate()
+                      this._files = [...this._files.splice(this._files.indexOf(file), 1)]
+                      this.dispatchEvent(
+                        new CustomEvent('files-change', {
+                          bubbles: true,
+                          composed: true,
+                          detail: {
+                            files: this._files
+                          }
+                        })
+                      )
                     }}
                     >delete_outline</mwc-icon
                   >
@@ -137,6 +145,15 @@ export class CameraCapturer extends LitElement {
 
     this.addEventListener('file-drop', e => {
       this._files = this.multiple ? e.detail : e.detail[0] ? [e.detail[0]] : []
+      this.dispatchEvent(
+        new CustomEvent('files-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            files: this._files
+          }
+        })
+      )
     })
   }
 
@@ -151,6 +168,16 @@ export class CameraCapturer extends LitElement {
   reset() {
     this.fileInput.value = ''
     this._files = []
+
+    this.dispatchEvent(
+      new CustomEvent('files-change', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          files: this._files
+        }
+      })
+    )
   }
 }
 

package/client/components/ocr-viewpart.js

@@ -0,0 +1,79 @@
+import './camera-capturer'
+import '@material/mwc-button'
+import '@operato/ocr'
+
+import { gql } from 'graphql-tag'
+import { css, html, LitElement } from 'lit-element'
+
+import { client } from '@things-factory/shell'
+
+class OCRViewPart extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          min-width: 240px;
+        }
+
+        ox-ocr-helper {
+          flex: 1;
+        }
+      `
+    ]
+  }
+
+  static get properties() {
+    return {}
+  }
+
+  render() {
+    const files = this._files || []
+    const index = this.index || 0
+    const file = files[index]
+    const image = file && URL.createObjectURL(file)
+    if (image) {
+      requestAnimationFrame(() => URL.revokeObjectURL(image))
+    }
+
+    return html` <ox-ocr-helper @attached=${this.upload.bind(this)}> </ox-ocr-helper> `
+  }
+
+  async upload(e) {
+    const images = e.detail
+
+    const response = await client.query({
+      query: gql`
+        query ocrRequest($images: [Upload!]!) {
+          ocrRequest(images: $images)
+        }
+      `,
+      variables: {
+        images: images
+      },
+      context: { hasUpload: true }
+    })
+
+    if (!response.errors) {
+      const helper = this.shadowRoot.querySelector('ox-ocr-helper')
+      helper.result = response.data.ocrRequest.map(result => {
+        return {
+          ...result,
+          boundaries: JSON.parse(result.boundaries)
+        }
+      })
+    } else {
+      document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: {
+            level: 'error',
+            message: response.errors
+          }
+        })
+      )
+    }
+  }
+}
+
+customElements.define('ocr-viewpart', OCRViewPart)

package/client/menu.js

@@ -80,7 +80,7 @@ export function getMenuTemplate() {
         },
         {
           name: 'Label Scan',
-          path: 'bizplace-register'
+          path: 'label-scan-page'
         },
         {
           name: 'Ghost Print',

package/client/pages/grist-mode-page.js

@@ -2,11 +2,9 @@ import '@operato/mini-popup'
 import '@operato/data-grist'
 
 import { css, html } from 'lit-element'
-import { getEditor, getRenderer } from '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
 
+import { i18next, localize } from '@things-factory/i18n-base'
 import { PageView } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
 
 class GristModePage extends localize(i18next)(PageView) {
   static get styles() {

package/client/pages/label-scan-page.js

@@ -0,0 +1,189 @@
+import '@things-factory/barcode-ui'
+
+import { css, html } from 'lit-element'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { PageView, store } from '@things-factory/shell'
+
+import { referencePageStyles } from './reference-page-styles'
+
+class LabelScanPage extends connect(store)(PageView) {
+  static get styles() {
+    return [
+      referencePageStyles,
+      css`
+        :host {
+          display: block;
+        }
+
+        div {
+          overflow-wrap: anywhere;
+        }
+      `
+    ]
+  }
+
+  static get properties() {
+    return {
+      bcid: String,
+      value: String,
+      bcWidth: Number,
+      bcHeight: Number,
+      bcScale: Number,
+      padding: Number
+    }
+  }
+
+  get context() {
+    return {
+      title: 'Barcode Scan Input and Tag Component'
+    }
+  }
+
+  render() {
+    const bcid = this.bcid || 'code128'
+    const value = this.value || '213439240572'
+    const bcWidth = this.bcWidth || 30
+    const bcHeight = this.bcHeight || 30
+    const bcScale = this.bcScale || 3
+    const padding = this.padding || 5
+
+    return html`
+      <section>
+        <h2>Barcode Scanable Input</h2>
+        <p>
+          barcode-scanable-input 컴포넌트는 카메라 입력을 통해서 바코드를 스캔하고, 스캔한 결과를 입력 필드에 적용한다.
+        </p>
+        <barcode-scanable-input
+          name="barcode-input"
+          custom-input
+          @keypress=${e => {
+            if (e.keyCode === 13) {
+              e.preventDefault()
+              this.value = e.target.shadowRoot.querySelector('input').value
+              console.log('input completed.', e.target.value)
+            }
+          }}
+        ></barcode-scanable-input>
+      </section>
+
+      <section>
+        <h2>Input Field with Barcode Image</h2>
+        <p>barcode-input 컴포넌트는 입력필드에 입력된 결과를 바코드 이미지로도 보여준다.</p>
+
+        <label>bacode type</label>
+        <select
+          @change=${e => {
+            this.bcid = e.target.value
+          }}
+          .value=${bcid}
+        >
+          <option value="code39">code39</option>
+          <option value="code128" selected>code128</option>
+          <option value="qrcode">QR</option>
+        </select>
+
+        <label>bacode width</label>
+        <select
+          @change=${e => {
+            this.bcWidth = Number(e.target.value)
+          }}
+          .value=${bcWidth}
+        >
+          <option value="10">10</option>
+          <option value="30" selected>30</option>
+          <option value="50">50</option>
+        </select>
+
+        <label>bacode height</label>
+        <select
+          @change=${e => {
+            this.bcHeight = Number(e.target.value)
+          }}
+          .value=${bcHeight}
+        >
+          <option value="10">10</option>
+          <option value="30" selected>30</option>
+          <option value="50">50</option>
+        </select>
+
+        <label>bacode scale</label>
+        <select
+          @change=${e => {
+            this.bcScale = Number(e.target.value)
+          }}
+          .value=${bcScale}
+        >
+          <option value="2">2</option>
+          <option value="3" selected>3</option>
+          <option value="4">4</option>
+        </select>
+
+        <label>padding</label>
+        <select
+          @change=${e => {
+            this.padding = Number(e.target.value)
+          }}
+          .value=${padding}
+        >
+          <option value="3">3</option>
+          <option value="5" selected>5</option>
+          <option value="10">10</option>
+        </select>
+
+        <barcode-input
+          .bcid=${bcid}
+          .value=${value}
+          .bcWidth=${bcWidth}
+          .bcHeight=${bcHeight}
+          .bcScale=${bcScale}
+          @change=${e => {
+            this.value = e.target.value
+          }}
+        ></barcode-input>
+      </section>
+
+      <section>
+        <h2>Barcode Image Component</h2>
+        <p>
+          barcode-tag 컴포넌트는 바코드 이미지를 보여준다. 바코드 이미지를 클릭하면 이미지 파일을 다운로드 받을 수 있다.
+        </p>
+
+        <barcode-tag
+          .bcid=${bcid}
+          .value=${value}
+          .bcWidth=${bcWidth}
+          .bcHeight=${bcHeight}
+          .bcScale=${bcScale}
+          .padding=${padding}
+        ></barcode-tag>
+      </section>
+    `
+  }
+
+  updated(changes) {
+    /*
+     * If this page properties are changed, this callback will be invoked.
+     * This callback will be called back only when this page is activated.
+     */
+    if (changes.has('itemId') || changes.has('params')) {
+      /* do something */
+    }
+  }
+
+  stateChanged(state) {
+    /*
+     * application wide state changed
+     *
+     */
+  }
+
+  pageUpdated(changes, lifecycle, before) {
+    if (this.active) {
+    } else {
+      /* this page is deactivated */
+    }
+  }
+}
+
+customElements.define('label-scan-page', LabelScanPage)

package/client/pages/ocr-page.js

@@ -1,12 +1,13 @@
 import '@things-factory/form-ui'
 import '../components/camera-capturer'
 
-import { PageView, client, store } from '@things-factory/shell'
+import { gql } from 'graphql-tag'
 import { css, html } from 'lit-element'
+import { connect } from 'pwa-helpers/connect-mixin.js'
 
+import { client, PageView, store } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-import { gql } from 'graphql-tag'
+
 import { referencePageStyles } from './reference-page-styles'
 
 class OCRPage extends connect(store)(PageView) {

package/client/route.js

@@ -55,6 +55,10 @@ export default function route(page) {
       import('./pages/direct-print')
       return page
 
+    case 'label-scan-page':
+      import('./pages/label-scan-page')
+      return page
+
     case 'ghost-print-page':
       import('./pages/ghost-print-page')
       return page

package/config/config.development.js

@@ -1,3 +1,7 @@
 module.exports = {
-  subdomain: "system"
+  subdomain: 'system',
+  awsAppSync: {
+    apiUrl: '',
+    apiKey: ''
+  }
 }

package/dist-server/service/reference/lambda-call.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.interpretImages = void 0;
+const node_fetch_1 = __importDefault(require("node-fetch"));
+const env_1 = require("@things-factory/env");
+const utils_1 = require("@things-factory/utils");
+const appSyncConfig = env_1.config.get('awsAppSync');
+async function interpretImages(images) {
+    const query = utils_1.gqlBuilder.jsonToGraphQLQuery({
+        mutation: {
+            upload: {
+                __args: {
+                    images
+                },
+                success_count: true,
+                failure_count: true,
+                result: {
+                    key_values: true,
+                    boundaries: true,
+                    texts: true
+                }
+            }
+        }
+    });
+    const body = JSON.stringify({ query });
+    const response = await (0, node_fetch_1.default)(appSyncConfig['apiUrl'], {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/graphql',
+            'x-api-key': appSyncConfig['apiKey']
+        },
+        body
+    });
+    const jsonRes = await response.json();
+    return jsonRes;
+}
+exports.interpretImages = interpretImages;
+// @deprecated
+function getRequestBody(images) {
+    // @things-factory/utils gqlBuilder.buildArgs 와 유사
+    const imageArgs = images.map(obj => {
+        const args = [];
+        for (let key in obj) {
+            args.push(`${key}: \"${obj[key]}\"`);
+        }
+        return '{' + args.join(',') + '}';
+    });
+    // console.log(gqlBuilder.buildArgs(images))
+    // console.log(imageArgs)
+    const body = JSON.stringify({
+        query: `mutation {
+      upload(images: ${imageArgs}) { 
+        success_count
+        failure_count
+        results {
+          key_values
+          boundaries
+          texts
+        } 
+      }
+    }`
+    });
+    return body;
+}
+//# sourceMappingURL=lambda-call.js.map

package/dist-server/service/reference/lambda-call.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lambda-call.js","sourceRoot":"","sources":["../../../server/service/reference/lambda-call.ts"],"names":[],"mappings":";;;;;;AAAA,4DAA8B;AAE9B,6CAA4C;AAC5C,iDAAkD;AAElD,MAAM,aAAa,GAAG,YAAM,CAAC,GAAG,CAAC,YAAY,CAAC,CAAA;AAEvC,KAAK,UAAU,eAAe,CAAC,MAAM;IAC1C,MAAM,KAAK,GAAG,kBAAU,CAAC,kBAAkB,CAAC;QAC1C,QAAQ,EAAE;YACR,MAAM,EAAE;gBACN,MAAM,EAAE;oBACN,MAAM;iBACP;gBACD,aAAa,EAAE,IAAI;gBACnB,aAAa,EAAE,IAAI;gBACnB,MAAM,EAAE;oBACN,UAAU,EAAE,IAAI;oBAChB,UAAU,EAAE,IAAI;oBAChB,KAAK,EAAE,IAAI;iBACZ;aACF;SACF;KACF,CAAC,CAAA;IAEF,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;IACtC,MAAM,QAAQ,GAAG,MAAM,IAAA,oBAAK,EAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;QACpD,MAAM,EAAE,MAAM;QACd,OAAO,EAAE;YACP,cAAc,EAAE,qBAAqB;YACrC,WAAW,EAAE,aAAa,CAAC,QAAQ,CAAC;SACrC;QACD,IAAI;KACL,CAAC,CAAA;IAEF,MAAM,OAAO,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAA;IACrC,OAAO,OAAO,CAAA;AAChB,CAAC;AA9BD,0CA8BC;AAED,cAAc;AACd,SAAS,cAAc,CAAC,MAAM;IAC5B,kDAAkD;IAClD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;QACjC,MAAM,IAAI,GAAG,EAAE,CAAA;QACf,KAAK,IAAI,GAAG,IAAI,GAAG,EAAE;YACnB,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG,OAAO,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;SACrC;QACD,OAAO,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAA;IACnC,CAAC,CAAC,CAAA;IAEF,4CAA4C;IAC5C,yBAAyB;IAEzB,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC;QAC1B,KAAK,EAAE;uBACY,SAAS;;;;;;;;;MAS1B;KACH,CAAC,CAAA;IAEF,OAAO,IAAI,CAAA;AACb,CAAC"}

package/dist-server/service/reference/reference-query.js

@@ -13,13 +13,16 @@ var __param = (this && this.__param) || function (paramIndex, decorator) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReferenceQuery = void 0;
-const type_graphql_1 = require("type-graphql");
 const graphql_upload_1 = require("graphql-upload");
+const type_graphql_1 = require("type-graphql");
+const attachment_base_1 = require("@things-factory/attachment-base");
 const shell_1 = require("@things-factory/shell");
 const utils_1 = require("@things-factory/utils");
-const attachment_base_1 = require("@things-factory/attachment-base");
+const lambda_call_1 = require("./lambda-call");
+const debug = require('debug')('things-factory:reference-app');
 let ReferenceQuery = class ReferenceQuery {
     async ocrRequest(_, images, context) {
+        var _a, _b;
         const { domain, user, tx } = context.state;
         const all = Promise.all(images);
         if ((images === null || images === void 0 ? void 0 : images.length) > 0) {
@@ -31,8 +34,27 @@ let ReferenceQuery = class ReferenceQuery {
                 };
             });
             await (0, attachment_base_1.createAttachments)(_, { attachments }, context);
+            const files = await Promise.all(images.map(async (file) => {
+                const { createReadStream, filename, mimetype } = await file;
+                const readStream = createReadStream();
+                const image = await this.streamToString(readStream);
+                // format is 'image/jpeg'
+                const formatArr = mimetype.split('/');
+                return { data: image, name: filename, format: formatArr[formatArr.length - 1] };
+            }));
+            const res = await (0, lambda_call_1.interpretImages)(files);
+            console.log('interpretImages response', JSON.stringify(res, null, ' '));
+            return (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.upload) === null || _b === void 0 ? void 0 : _b.result;
         }
-        return 'success';
+        return [];
+    }
+    streamToString(stream) {
+        const chunks = [];
+        return new Promise((resolve, reject) => {
+            stream.on('data', (chunk) => chunks.push(Buffer.from(chunk)));
+            stream.on('error', (err) => reject(err));
+            stream.on('end', () => resolve(Buffer.concat(chunks).toString('base64')));
+        });
     }
     async ocrPendingJob(_, tag, context) {
         const { domain } = context.state;
@@ -49,7 +71,7 @@ let ReferenceQuery = class ReferenceQuery {
     }
 };
 __decorate([
-    (0, type_graphql_1.Query)(returns => String, { description: 'To reference of ocr request' }),
+    (0, type_graphql_1.Query)(returns => shell_1.ScalarAny, { description: 'To reference of ocr request' }),
     __param(0, (0, type_graphql_1.Root)()),
     __param(1, (0, type_graphql_1.Arg)('images', () => [graphql_upload_1.GraphQLUpload])),
     __param(2, (0, type_graphql_1.Ctx)()),

package/dist-server/service/reference/reference-query.js.map

@@ -1 +1 @@
-{"version":3,"file":"reference-query.js","sourceRoot":"","sources":["../../../server/service/reference/reference-query.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,+CAAmF;AACnF,mDAA0D;AAC1D,iDAAuD;AACvD,iDAA6C;AAC7C,qEAA+E;AAG/E,IAAa,cAAc,GAA3B,MAAa,cAAc;IAEzB,KAAK,CAAC,UAAU,CACN,CAAC,EAET,MAAoB,EACb,OAAY;QAEnB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,OAAO,CAAC,KAAK,CAAA;QAC1C,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;QAE/B,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,IAAG,CAAC,EAAE;YACtB,MAAM,WAAW,GAAiB,MAAM,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;gBACxD,OAAO;oBACL,IAAI,EAAE,UAAU;oBAChB,KAAK,EAAE,GAAG;oBACV,QAAQ,EAAE,WAAW;iBACtB,CAAA;YACH,CAAC,CAAC,CAAA;YACF,MAAM,IAAA,mCAAiB,EAAC,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,OAAO,CAAC,CAAA;SACrD;QAED,OAAO,SAAS,CAAA;IAClB,CAAC;IAGD,KAAK,CAAC,aAAa,CAAS,CAAC,EAAc,GAAW,EAAS,OAAY;QACzE,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,KAAK,CAAA;QAEhC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,EAAE;YAC7B,MAAM,IAAA,aAAK,EAAC,GAAG,CAAC,CAAA;YAEhB,IAAA,uBAAe,EAAC;gBACd,MAAM;gBACN,GAAG;gBACH,QAAQ,EAAE,CAAC;gBACX,OAAO,EAAE,GAAG,CAAC,GAAG,EAAE,SAAS;aAC5B,CAAC,CAAA;SACH;QAED,OAAO,SAAS,CAAA;IAClB,CAAC;CACF,CAAA;AAxCC;IADC,IAAA,oBAAK,EAAC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,EAAE,WAAW,EAAE,6BAA6B,EAAE,CAAC;IAEtE,WAAA,IAAA,mBAAI,GAAE,CAAA;IACN,WAAA,IAAA,kBAAG,EAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,8BAAa,CAAC,CAAC,CAAA;IAEpC,WAAA,IAAA,kBAAG,GAAE,CAAA;;;;gDAiBP;AAGD;IADC,IAAA,oBAAK,EAAC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,EAAE,WAAW,EAAE,sCAAsC,EAAE,CAAC;IAC7D,WAAA,IAAA,mBAAI,GAAE,CAAA;IAAK,WAAA,IAAA,kBAAG,EAAC,KAAK,CAAC,CAAA;IAAe,WAAA,IAAA,kBAAG,GAAE,CAAA;;;;mDAe7D;AAzCU,cAAc;IAD1B,IAAA,uBAAQ,GAAE;GACE,cAAc,CA0C1B;AA1CY,wCAAc"}
+{"version":3,"file":"reference-query.js","sourceRoot":"","sources":["../../../server/service/reference/reference-query.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/reference-app",
-  "version": "4.0.4",
+  "version": "4.0.5",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -41,45 +41,46 @@
     "@material/mwc-checkbox": "^0.22.1",
     "@operato/data-grist": "^0.2.18",
     "@operato/ghost-print": "0.1.14",
-    "@operato/mini-popup": "^0.2.3",
+    "@operato/mini-popup": "^0.2.5",
+    "@operato/ocr": "^0.2.21",
     "@operato/pull-to-refresh": "^0.2.4",
-    "@things-factory/api": "^4.0.4",
-    "@things-factory/apptool-ui": "^4.0.4",
-    "@things-factory/auth-ui": "^4.0.4",
-    "@things-factory/board-service": "^4.0.4",
-    "@things-factory/board-ui": "^4.0.4",
-    "@things-factory/context-ui": "^4.0.4",
-    "@things-factory/dashboard": "^4.0.4",
-    "@things-factory/export-ui": "^4.0.4",
-    "@things-factory/export-ui-excel": "^4.0.4",
-    "@things-factory/grist-ui": "^4.0.1",
-    "@things-factory/help": "^4.0.4",
-    "@things-factory/i18n-ui": "^4.0.4",
-    "@things-factory/integration-ui": "^4.0.4",
-    "@things-factory/lite-menu": "^4.0.4",
-    "@things-factory/more-ui": "^4.0.4",
-    "@things-factory/notification": "^4.0.4",
-    "@things-factory/oauth2-client": "^4.0.4",
-    "@things-factory/print-ui": "^4.0.4",
-    "@things-factory/resource-ui": "^4.0.4",
-    "@things-factory/scene-chartjs": "^4.0.4",
-    "@things-factory/scene-clock": "^4.0.4",
-    "@things-factory/scene-form": "^4.0.4",
-    "@things-factory/scene-gauge": "^4.0.4",
-    "@things-factory/scene-half-roundrect": "^4.0.4",
-    "@things-factory/scene-indoor-map": "^4.0.4",
-    "@things-factory/scene-news-ticker": "^4.0.4",
-    "@things-factory/scene-progressbar": "^4.0.4",
-    "@things-factory/scene-random": "^4.0.4",
-    "@things-factory/scene-switch": "^4.0.4",
-    "@things-factory/scene-tab": "^4.0.4",
-    "@things-factory/setting-base": "^4.0.4",
-    "@things-factory/setting-ui": "^4.0.4",
-    "@things-factory/shell": "^4.0.4",
-    "@things-factory/system-ui": "^4.0.4"
+    "@things-factory/api": "^4.0.5",
+    "@things-factory/apptool-ui": "^4.0.5",
+    "@things-factory/auth-ui": "^4.0.5",
+    "@things-factory/board-service": "^4.0.5",
+    "@things-factory/board-ui": "^4.0.5",
+    "@things-factory/context-ui": "^4.0.5",
+    "@things-factory/dashboard": "^4.0.5",
+    "@things-factory/export-ui": "^4.0.5",
+    "@things-factory/export-ui-excel": "^4.0.5",
+    "@things-factory/grist-ui": "^4.0.5",
+    "@things-factory/help": "^4.0.5",
+    "@things-factory/i18n-ui": "^4.0.5",
+    "@things-factory/integration-ui": "^4.0.5",
+    "@things-factory/lite-menu": "^4.0.5",
+    "@things-factory/more-ui": "^4.0.5",
+    "@things-factory/notification": "^4.0.5",
+    "@things-factory/oauth2-client": "^4.0.5",
+    "@things-factory/print-ui": "^4.0.5",
+    "@things-factory/resource-ui": "^4.0.5",
+    "@things-factory/scene-chartjs": "^4.0.5",
+    "@things-factory/scene-clock": "^4.0.5",
+    "@things-factory/scene-form": "^4.0.5",
+    "@things-factory/scene-gauge": "^4.0.5",
+    "@things-factory/scene-half-roundrect": "^4.0.5",
+    "@things-factory/scene-indoor-map": "^4.0.5",
+    "@things-factory/scene-news-ticker": "^4.0.5",
+    "@things-factory/scene-progressbar": "^4.0.5",
+    "@things-factory/scene-random": "^4.0.5",
+    "@things-factory/scene-switch": "^4.0.5",
+    "@things-factory/scene-tab": "^4.0.5",
+    "@things-factory/setting-base": "^4.0.5",
+    "@things-factory/setting-ui": "^4.0.5",
+    "@things-factory/shell": "^4.0.5",
+    "@things-factory/system-ui": "^4.0.5"
   },
   "devDependencies": {
-    "@things-factory/builder": "^4.0.3"
+    "@things-factory/builder": "^4.0.5"
   },
-  "gitHead": "292d7c4e2675d228d6be474ea6a0525d26ac1657"
+  "gitHead": "b7b2976818dceab74a34903499d408eed5d45b04"
 }

package/server/service/reference/lambda-call.ts

@@ -0,0 +1,69 @@
+import fetch from 'node-fetch'
+
+import { config } from '@things-factory/env'
+import { gqlBuilder } from '@things-factory/utils'
+
+const appSyncConfig = config.get('awsAppSync')
+
+export async function interpretImages(images) {
+  const query = gqlBuilder.jsonToGraphQLQuery({
+    mutation: {
+      upload: {
+        __args: {
+          images
+        },
+        success_count: true,
+        failure_count: true,
+        result: {
+          key_values: true,
+          boundaries: true,
+          texts: true
+        }
+      }
+    }
+  })
+
+  const body = JSON.stringify({ query })
+  const response = await fetch(appSyncConfig['apiUrl'], {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/graphql',
+      'x-api-key': appSyncConfig['apiKey']
+    },
+    body
+  })
+
+  const jsonRes = await response.json()
+  return jsonRes
+}
+
+// @deprecated
+function getRequestBody(images) {
+  // @things-factory/utils gqlBuilder.buildArgs 와 유사
+  const imageArgs = images.map(obj => {
+    const args = []
+    for (let key in obj) {
+      args.push(`${key}: \"${obj[key]}\"`)
+    }
+    return '{' + args.join(',') + '}'
+  })
+
+  // console.log(gqlBuilder.buildArgs(images))
+  // console.log(imageArgs)
+
+  const body = JSON.stringify({
+    query: `mutation {
+      upload(images: ${imageArgs}) { 
+        success_count
+        failure_count
+        results {
+          key_values
+          boundaries
+          texts
+        } 
+      }
+    }`
+  })
+
+  return body
+}

package/server/service/reference/reference-query.ts

@@ -1,18 +1,23 @@
-import { Resolver, Mutation, Query, Root, Arg, Ctx, Directive } from 'type-graphql'
-import { GraphQLUpload, FileUpload } from 'graphql-upload'
-import { publishProgress } from '@things-factory/shell'
-import { sleep } from '@things-factory/utils'
+import { FileUpload, GraphQLUpload } from 'graphql-upload'
+import { Arg, Ctx, Query, Resolver, Root } from 'type-graphql'
+
 import { Attachment, createAttachments } from '@things-factory/attachment-base'
+import { publishProgress, ScalarAny } from '@things-factory/shell'
+import { sleep } from '@things-factory/utils'
+
+import { interpretImages } from './lambda-call'
+
+const debug = require('debug')('things-factory:reference-app')
 
 @Resolver()
 export class ReferenceQuery {
-  @Query(returns => String, { description: 'To reference of ocr request' })
+  @Query(returns => ScalarAny, { description: 'To reference of ocr request' })
   async ocrRequest(
     @Root() _,
     @Arg('images', () => [GraphQLUpload])
     images: FileUpload[],
     @Ctx() context: any
-  ): Promise<string> {
+  ): Promise<ScalarAny> {
     const { domain, user, tx } = context.state
     const all = Promise.all(images)
 
@@ -25,9 +30,32 @@ export class ReferenceQuery {
         }
       })
       await createAttachments(_, { attachments }, context)
+
+      const files = await Promise.all(
+        images.map(async file => {
+          const { createReadStream, filename, mimetype } = await file
+          const readStream = createReadStream()
+          const image = await this.streamToString(readStream)
+          // format is 'image/jpeg'
+          const formatArr = mimetype.split('/')
+          return { data: image, name: filename, format: formatArr[formatArr.length - 1] }
+        })
+      )
+      const res = await interpretImages(files)
+      console.log('interpretImages response', JSON.stringify(res, null, ' '))
+      return res.data?.upload?.result
     }
 
-    return 'success'
+    return []
+  }
+
+  streamToString (stream) {
+    const chunks = [];
+    return new Promise((resolve, reject) => {
+      stream.on('data', (chunk) => chunks.push(Buffer.from(chunk)));
+      stream.on('error', (err) => reject(err));
+      stream.on('end', () => resolve(Buffer.concat(chunks).toString('base64')));
+    })
   }
 
   @Query(returns => String, { description: 'To reference of pending job progress' })

package/things-factory.config.js

@@ -56,6 +56,10 @@ export default {
       tagname: 'direct-print',
       page: 'direct-print'
     },
+    {
+      tagname: 'label-scan-page',
+      page: 'label-scan-page'
+    },
     {
       tagname: 'ghost-print-page',
       page: 'ghost-print-page'