vCfkK5DJ

1import React from 'react';
2import axios from 'axios';
3
4const APIs = [
5  [
6    "v3.0/ocr",
7    "OCR (3.0)",
8    [["en", "English"], ["zh-Hans", "Simplified Chinese"], ["zh-Hant", "Traditional Chinese"]]
9  ],
10  [
11    "v2.1/recognizeText",
12    "Recognize-Text (2.1)",
13    [["Printed", "Printed"], ["Handwritten", "Handwritten"]]
14  ],
15  [
16    "v3.0/read/analyze",
17    "Read (3.0)",
18    [["en", "English"], ["es", "Spanish"]]
19  ]
20]
21
22const value_to_index = {}
23for (let i = 0; i < APIs.length; i++) {
24  value_to_index[APIs[i][1]] = i;
25  const options = APIs[i][2];
26  for (let j = 0; j < options.length; j++) {
27    value_to_index[options[j][1]] = j;
28  }
29}
30
31const idxToAPI = (api_idx) => APIs[api_idx][1];
32const idxToOption = (api_idx, option_idx) => APIs[api_idx][2][option_idx][1];
33
34const toAPIArgs = (api_idx, option_idx) => {
35  const APIArgs = { version: APIs[api_idx][0] };
36  if (api_idx === 1) {
37    APIArgs["args"] = { mode: APIs[1][2][option_idx][0] };
38  }
39  else {
40    APIArgs["args"] = { language: APIs[api_idx][2][option_idx][0] };
41  }
42  return APIArgs;
43}
44
45class OCRForm extends React.Component {
46  constructor(props) {
47    super(props);
48    this.state = { API_idx: 0, option_idx: 0, imageValue: null, showResult: false, init: true }; // default uses the old OCR api
49    this.submitResult = null;
50  }
51
52  handleAPIChange = (event) => {
53    const newAPI_idx = value_to_index[event.target.value] | 0 ;
54    this.setState({ API_idx: newAPI_idx, option_idx: 0});
55    console.log(toAPIArgs(newAPI_idx, 0));
56  }
57
58  handleImage = (event) => {
59    this.setState({ imageValue: event.target.files[0] })
60  }
61
62  handleSubmit = (event) => {
63    event.preventDefault()
64    const apiArgs = toAPIArgs(this.state.API_idx, this.state.option_idx);
65    let formData = new FormData()
66    formData.append('file', this.state.imageValue)
67    formData.append('body', JSON.stringify(apiArgs))
68    for (var key of formData.entries()) {
69      console.log(key[0] + ', ' + key[1])
70    }
71
72    axios({
73      method: 'post',
74      url: 'upload-react',
75      data: formData,
76      config: { headers: { 'Content-Type': 'multipart/form-data' } }
77    })
78      .then(response => {
79        console.log(response)
80        this.submitResult = response.data;
81        this.setState({ showResult: true });
82      })
83      .catch(errors => console.log(errors))
84  }
85
86  handleOptionChange = (event) => {
87    const new_option_index = value_to_index[event.target.value] | 0;
88    this.setState({ option_idx: new_option_index });
89    console.log(toAPIArgs(this.state.API_idx, new_option_index));
90  }
91
92  render() {
93    let display = null;
94    if (this.submitResult) {
95      if (this.submitResult.serverError) {
96        console.log(this.submitResult.errorMsg)
97        display = (
98          <div className="error-box">
99            <h3>Internal Server Error</h3>
100            <p>Please contact t-keawan@microsoft.com for more support</p>
101          </div>
102        )
103      } else {
104        display = (
105          <div>
106            <br /><br />
107            <img className="OCRResult-img" src={this.submitResult.imgLink} alt="User Image" />
108            <br /><br />
109            <div className="text-center">
110              <a className="btn btn-primary" href={this.submitResult.JSONLink} download="result.json">Download JSON file</a>{" "}
111            </div><br />
112          </div>
113        )
114      }
115    }
116
117    return (
118      <form onSubmit={this.handleSubmit} encType="multipart/form-data">
119        <div className="file-input">
120          <input type="file" name="image" onChange={this.handleImage} /><br />
121        </div>
122        <label>Choose an API:</label>
123        <select name="api_form" value={idxToAPI(this.state.API_idx)} onChange={this.handleAPIChange}>
124          {APIs.map(_API => (
125            <option value={_API[1]} key={_API[0]}>{_API[1]}</option>
126          ))}
127        </select><br />
128        <label>{this.state.API_idx === 1 ? "Select Mode:" : "Target Language:"}</label>
129        <select
130          name="dropDown"
131          value={idxToOption(this.state.API_idx, this.state.option_idx)}
132          onChange={this.handleOptionChange}
133        >
134          {APIs[this.state.API_idx][2].map(_option => (
135            <option value={_option[1]} key={_option[0]}>{_option[1]}</option>
136          ))}
137        </select>
138        <br />
139        <div className="text-center">
140          <input className="btn btn-primary" type="submit" value="Submit"></input>
141        </div>
142        <div className="AfterSubmit">
143          {display}
144        </div>
145      </form>
146    );
147  }
148}
149
150export default OCRForm;