├── Screenshot.png ├── img └── loading.gif ├── css ├── styles.css └── fancybox.css ├── js ├── client │ ├── apiGatewayClient.js │ ├── utils.js │ ├── simpleHttpClient.js │ ├── enc-base64.js │ ├── hmac.js │ ├── sha256.js │ ├── hmac-sha256.js │ ├── apigClient.js │ ├── sigV4Client.js │ ├── url-template.js │ └── axios.standalone.js ├── scripts.js ├── imageTools.js └── fancybox.js ├── index.html └── README.md /Screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deeparteffects/deepart-api-html-js-example/HEAD/Screenshot.png -------------------------------------------------------------------------------- /img/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deeparteffects/deepart-api-html-js-example/HEAD/img/loading.gif -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #fff; 3 | # color: #673ab7; 4 | color: #111; 5 | font-family: Sans-serif; 6 | } 7 | 8 | #progress-wrapper { 9 | width: 350px; 10 | margin: auto; 11 | } 12 | 13 | #qualitySelect { 14 | margin: 15px; 15 | } 16 | 17 | #progressbar { 18 | margin: 25px; 19 | } 20 | 21 | .result-image { 22 | margin: 5px; 23 | } 24 | 25 | .container { 26 | margin: auto; 27 | width: 768px; 28 | padding: 10px; 29 | text-align: center; 30 | } 31 | 32 | .result-image { 33 | width: 125px; 34 | border:1px solid #333333; 35 | } 36 | 37 | .style { 38 | width: 125px; 39 | height: 125px; 40 | background-size: cover; 41 | background-position: center center; 42 | background-repeat: no-repeat; 43 | margin: 8px; 44 | border:1px solid #333333; 45 | } 46 | 47 | #selectable { 48 | list-style-type: none; 49 | list-style: none; 50 | } 51 | 52 | #selectable li { 53 | display: inline; 54 | } 55 | 56 | #selectable div { 57 | float: left; 58 | } -------------------------------------------------------------------------------- /js/client/apiGatewayClient.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2010-2016 Amazon.com, Inc. or its affiliates. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"). 5 | * You may not use this file except in compliance with the License. 6 | * A copy of the License is located at 7 | * 8 | * http://aws.amazon.com/apache2.0 9 | * 10 | * or in the "license" file accompanying this file. This file is distributed 11 | * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either 12 | * express or implied. See the License for the specific language governing 13 | * permissions and limitations under the License. 14 | */ 15 | 16 | var apiGateway = apiGateway || {}; 17 | apiGateway.core = apiGateway.core || {}; 18 | 19 | apiGateway.core.apiGatewayClientFactory = {}; 20 | apiGateway.core.apiGatewayClientFactory.newClient = function (simpleHttpClientConfig, sigV4ClientConfig) { 21 | var apiGatewayClient = { }; 22 | //Spin up 2 httpClients, one for simple requests, one for SigV4 23 | var sigV4Client = apiGateway.core.sigV4ClientFactory.newClient(sigV4ClientConfig); 24 | var simpleHttpClient = apiGateway.core.simpleHttpClientFactory.newClient(simpleHttpClientConfig); 25 | 26 | apiGatewayClient.makeRequest = function (request, authType, additionalParams, apiKey) { 27 | //Default the request to use the simple http client 28 | var clientToUse = simpleHttpClient; 29 | 30 | //Attach the apiKey to the headers request if one was provided 31 | if (apiKey !== undefined && apiKey !== '' && apiKey !== null) { 32 | request.headers['x-api-key'] = apiKey; 33 | } 34 | 35 | if (request.body === undefined || request.body === '' || request.body === null || Object.keys(request.body).length === 0) { 36 | request.body = undefined; 37 | } 38 | 39 | // If the user specified any additional headers or query params that may not have been modeled 40 | // merge them into the appropriate request properties 41 | request.headers = apiGateway.core.utils.mergeInto(request.headers, additionalParams.headers); 42 | request.queryParams = apiGateway.core.utils.mergeInto(request.queryParams, additionalParams.queryParams); 43 | 44 | //If an auth type was specified inject the appropriate auth client 45 | if (authType === 'AWS_IAM') { 46 | clientToUse = sigV4Client; 47 | } 48 | 49 | //Call the selected http client to make the request, returning a promise once the request is sent 50 | return clientToUse.makeRequest(request); 51 | }; 52 | return apiGatewayClient; 53 | }; 54 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 |
39 |
9 |
10 | ## 1. Add dependencies to your website
11 | ```javascript
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | ```
24 |
25 | ## 2. Get a client instance
26 | First of all create an Deep Art Effects Client instance and insert your API-Key,
27 | your Access-Key and your Secret-Key.
28 |
29 | ```javascript
30 | var deepArtEffectsClient = apigClientFactory.newClient({
31 | apiKey: '--INSERT YOUR API KEY--',
32 | accessKey: '--INSERT YOUR ACCESS KEY--',
33 | secretKey: '--INSERT YOUR SECRET KEY--',
34 | });
35 | ```
36 |
37 | ## 3. Get a list of available styles
38 | Next you want get a list of available styles using the stylesGet method. You
39 | get the id and a URL to an image representing the style.
40 |
41 | ```javascript
42 | deepArtEffectsClient.stylesGet()
43 | .then(function(result){
44 | console.log("Successfully loaded styles");
45 | styles = result.data;
46 | for (var i = 0, length = styles.length; i < length; i++) {
47 | console.log("StyleId: " + styles[i].id + ", URL: " + styles[i].url);
48 | }
49 | }).catch(function(result){
50 | console.log("Error loading styles");
51 | });
52 | ```
53 |
54 | ## 4. Upload an image
55 | To upload an image set the styleId you want and hand over the image binary data
56 | converted to Base64. In JavaScript you can convert data to Base64 using the
57 | btoa() function. After uploading the image you get a submissionId to check for
58 | the result.
59 | ```javascript
60 | var params = {
61 | styleId: styleId,
62 | };
63 | deepArtEffectsClient.uploadPost(params, base64ConvertedImage)
64 | .then(function(result) {
65 | console.log("Successfully uploaded image");
66 | console.log("SubmissionId: " + result.data.submissionId
67 | }).catch(function(result){
68 | console.log("Error uploading image");
69 | });
70 | ```
71 |
72 | ## 5. Check for the result
73 | You can pass the submissionId to the resultGet function in order to receive a
74 | status for your submission. If your submission is in `finished` state, you can
75 | use the URL to download your artwork.
76 | ```javascript
77 | var params = {
78 | submissionId: submissionId,
79 | };
80 | deepArtEffectsClient.resultGet(params)
81 | .then(function(result) {
82 | console.log("Successfully checked status");
83 | if(result.data.status=="finished") {
84 | console.log("URL for artwork: " + result.data.url)
85 | }
86 | }).catch(function(result){
87 | console.log("Error checking status");
88 | });
89 | ```
90 |
--------------------------------------------------------------------------------
/js/client/enc-base64.js:
--------------------------------------------------------------------------------
1 | /*
2 | CryptoJS v3.1.2
3 | code.google.com/p/crypto-js
4 | (c) 2009-2013 by Jeff Mott. All rights reserved.
5 | code.google.com/p/crypto-js/wiki/License
6 | */
7 | (function () {
8 | // Shortcuts
9 | var C = CryptoJS;
10 | var C_lib = C.lib;
11 | var WordArray = C_lib.WordArray;
12 | var C_enc = C.enc;
13 |
14 | /**
15 | * Base64 encoding strategy.
16 | */
17 | var Base64 = C_enc.Base64 = {
18 | /**
19 | * Converts a word array to a Base64 string.
20 | *
21 | * @param {WordArray} wordArray The word array.
22 | *
23 | * @return {string} The Base64 string.
24 | *
25 | * @static
26 | *
27 | * @example
28 | *
29 | * var base64String = CryptoJS.enc.Base64.stringify(wordArray);
30 | */
31 | stringify: function (wordArray) {
32 | // Shortcuts
33 | var words = wordArray.words;
34 | var sigBytes = wordArray.sigBytes;
35 | var map = this._map;
36 |
37 | // Clamp excess bits
38 | wordArray.clamp();
39 |
40 | // Convert
41 | var base64Chars = [];
42 | for (var i = 0; i < sigBytes; i += 3) {
43 | var byte1 = (words[i >>> 2] >>> (24 - (i % 4) * 8)) & 0xff;
44 | var byte2 = (words[(i + 1) >>> 2] >>> (24 - ((i + 1) % 4) * 8)) & 0xff;
45 | var byte3 = (words[(i + 2) >>> 2] >>> (24 - ((i + 2) % 4) * 8)) & 0xff;
46 |
47 | var triplet = (byte1 << 16) | (byte2 << 8) | byte3;
48 |
49 | for (var j = 0; (j < 4) && (i + j * 0.75 < sigBytes); j++) {
50 | base64Chars.push(map.charAt((triplet >>> (6 * (3 - j))) & 0x3f));
51 | }
52 | }
53 |
54 | // Add padding
55 | var paddingChar = map.charAt(64);
56 | if (paddingChar) {
57 | while (base64Chars.length % 4) {
58 | base64Chars.push(paddingChar);
59 | }
60 | }
61 |
62 | return base64Chars.join('');
63 | },
64 |
65 | /**
66 | * Converts a Base64 string to a word array.
67 | *
68 | * @param {string} base64Str The Base64 string.
69 | *
70 | * @return {WordArray} The word array.
71 | *
72 | * @static
73 | *
74 | * @example
75 | *
76 | * var wordArray = CryptoJS.enc.Base64.parse(base64String);
77 | */
78 | parse: function (base64Str) {
79 | // Shortcuts
80 | var base64StrLength = base64Str.length;
81 | var map = this._map;
82 |
83 | // Ignore padding
84 | var paddingChar = map.charAt(64);
85 | if (paddingChar) {
86 | var paddingIndex = base64Str.indexOf(paddingChar);
87 | if (paddingIndex != -1) {
88 | base64StrLength = paddingIndex;
89 | }
90 | }
91 |
92 | // Convert
93 | var words = [];
94 | var nBytes = 0;
95 | for (var i = 0; i < base64StrLength; i++) {
96 | if (i % 4) {
97 | var bits1 = map.indexOf(base64Str.charAt(i - 1)) << ((i % 4) * 2);
98 | var bits2 = map.indexOf(base64Str.charAt(i)) >>> (6 - (i % 4) * 2);
99 | words[nBytes >>> 2] |= (bits1 | bits2) << (24 - (nBytes % 4) * 8);
100 | nBytes++;
101 | }
102 | }
103 |
104 | return WordArray.create(words, nBytes);
105 | },
106 |
107 | _map: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
108 | };
109 | }());
110 |
--------------------------------------------------------------------------------
/js/client/hmac.js:
--------------------------------------------------------------------------------
1 | /*
2 | CryptoJS v3.1.2
3 | code.google.com/p/crypto-js
4 | (c) 2009-2013 by Jeff Mott. All rights reserved.
5 | code.google.com/p/crypto-js/wiki/License
6 | */
7 | (function () {
8 | // Shortcuts
9 | var C = CryptoJS;
10 | var C_lib = C.lib;
11 | var Base = C_lib.Base;
12 | var C_enc = C.enc;
13 | var Utf8 = C_enc.Utf8;
14 | var C_algo = C.algo;
15 |
16 | /**
17 | * HMAC algorithm.
18 | */
19 | var HMAC = C_algo.HMAC = Base.extend({
20 | /**
21 | * Initializes a newly created HMAC.
22 | *
23 | * @param {Hasher} hasher The hash algorithm to use.
24 | * @param {WordArray|string} key The secret key.
25 | *
26 | * @example
27 | *
28 | * var hmacHasher = CryptoJS.algo.HMAC.create(CryptoJS.algo.SHA256, key);
29 | */
30 | init: function (hasher, key) {
31 | // Init hasher
32 | hasher = this._hasher = new hasher.init();
33 |
34 | // Convert string to WordArray, else assume WordArray already
35 | if (typeof key == 'string') {
36 | key = Utf8.parse(key);
37 | }
38 |
39 | // Shortcuts
40 | var hasherBlockSize = hasher.blockSize;
41 | var hasherBlockSizeBytes = hasherBlockSize * 4;
42 |
43 | // Allow arbitrary length keys
44 | if (key.sigBytes > hasherBlockSizeBytes) {
45 | key = hasher.finalize(key);
46 | }
47 |
48 | // Clamp excess bits
49 | key.clamp();
50 |
51 | // Clone key for inner and outer pads
52 | var oKey = this._oKey = key.clone();
53 | var iKey = this._iKey = key.clone();
54 |
55 | // Shortcuts
56 | var oKeyWords = oKey.words;
57 | var iKeyWords = iKey.words;
58 |
59 | // XOR keys with pad constants
60 | for (var i = 0; i < hasherBlockSize; i++) {
61 | oKeyWords[i] ^= 0x5c5c5c5c;
62 | iKeyWords[i] ^= 0x36363636;
63 | }
64 | oKey.sigBytes = iKey.sigBytes = hasherBlockSizeBytes;
65 |
66 | // Set initial values
67 | this.reset();
68 | },
69 |
70 | /**
71 | * Resets this HMAC to its initial state.
72 | *
73 | * @example
74 | *
75 | * hmacHasher.reset();
76 | */
77 | reset: function () {
78 | // Shortcut
79 | var hasher = this._hasher;
80 |
81 | // Reset
82 | hasher.reset();
83 | hasher.update(this._iKey);
84 | },
85 |
86 | /**
87 | * Updates this HMAC with a message.
88 | *
89 | * @param {WordArray|string} messageUpdate The message to append.
90 | *
91 | * @return {HMAC} This HMAC instance.
92 | *
93 | * @example
94 | *
95 | * hmacHasher.update('message');
96 | * hmacHasher.update(wordArray);
97 | */
98 | update: function (messageUpdate) {
99 | this._hasher.update(messageUpdate);
100 |
101 | // Chainable
102 | return this;
103 | },
104 |
105 | /**
106 | * Finalizes the HMAC computation.
107 | * Note that the finalize operation is effectively a destructive, read-once operation.
108 | *
109 | * @param {WordArray|string} messageUpdate (Optional) A final message update.
110 | *
111 | * @return {WordArray} The HMAC.
112 | *
113 | * @example
114 | *
115 | * var hmac = hmacHasher.finalize();
116 | * var hmac = hmacHasher.finalize('message');
117 | * var hmac = hmacHasher.finalize(wordArray);
118 | */
119 | finalize: function (messageUpdate) {
120 | // Shortcut
121 | var hasher = this._hasher;
122 |
123 | // Compute HMAC
124 | var innerHash = hasher.finalize(messageUpdate);
125 | hasher.reset();
126 | var hmac = hasher.finalize(this._oKey.clone().concat(innerHash));
127 |
128 | return hmac;
129 | }
130 | });
131 | }());
132 |
--------------------------------------------------------------------------------
/js/client/sha256.js:
--------------------------------------------------------------------------------
1 | /*
2 | CryptoJS v3.1.2
3 | code.google.com/p/crypto-js
4 | (c) 2009-2013 by Jeff Mott. All rights reserved.
5 | code.google.com/p/crypto-js/wiki/License
6 | */
7 | var CryptoJS=CryptoJS||function(h,s){var f={},t=f.lib={},g=function(){},j=t.Base={extend:function(a){g.prototype=this;var c=new g;a&&c.mixIn(a);c.hasOwnProperty("init")||(c.init=function(){c.$super.init.apply(this,arguments)});c.init.prototype=c;c.$super=this;return c},create:function(){var a=this.extend();a.init.apply(a,arguments);return a},init:function(){},mixIn:function(a){for(var c in a)a.hasOwnProperty(c)&&(this[c]=a[c]);a.hasOwnProperty("toString")&&(this.toString=a.toString)},clone:function(){return this.init.prototype.extend(this)}},
8 | q=t.WordArray=j.extend({init:function(a,c){a=this.words=a||[];this.sigBytes=c!=s?c:4*a.length},toString:function(a){return(a||u).stringify(this)},concat:function(a){var c=this.words,d=a.words,b=this.sigBytes;a=a.sigBytes;this.clamp();if(b%4)for(var e=0;e>>2]|=(d[e>>>2]>>>24-8*(e%4)&255)<<24-8*((b+e)%4);else if(65535The requested content cannot be loaded.
Please try again later.