added demo

suprateek-sc19 · Apr 17, 2024 · 8073558 · 8073558
1 parent 23193c4
commit 8073558
Show file tree

Hide file tree

Showing 27 changed files with 3,220 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -0,0 +1,9 @@
+# Smart-Photo-Album
+
+![Architecture](./images/architecture-diagram.png)
+
+![Demo](./images/demo1.png)
+
+![Demo](./images/demo2.png)
+
+## Demo video: https://youtu.be/Q-ZYLe2_NBg
diff --git a/architecture-diagram.png b/architecture-diagram.png
diff --git a/frontend/.DS_Store b/frontend/.DS_Store
diff --git a/frontend/README.md b/frontend/README.md
@@ -0,0 +1,78 @@
+# Prerequisites
+For the JavaScript SDK to work your APIs need to support CORS. The Amazon API Gateway developer guide explains how to [setup CORS for an endpoint]().
+The generated SDK depends on third-party libraries. Include all of the scripts in your webpage
+
+    <script type="text/javascript" src="lib/axios/dist/axios.standalone.js"></script>
+    <script type="text/javascript" src="lib/CryptoJS/rollups/hmac-sha256.js"></script>
+    <script type="text/javascript" src="lib/CryptoJS/rollups/sha256.js"></script>
+    <script type="text/javascript" src="lib/CryptoJS/components/hmac.js"></script>
+    <script type="text/javascript" src="lib/CryptoJS/components/enc-base64.js"></script>
+    <script type="text/javascript" src="lib/url-template/url-template.js"></script>
+    <script type="text/javascript" src="lib/apiGatewayCore/sigV4Client.js"></script>
+    <script type="text/javascript" src="lib/apiGatewayCore/apiGatewayClient.js"></script>
+    <script type="text/javascript" src="lib/apiGatewayCore/simpleHttpClient.js"></script>
+    <script type="text/javascript" src="lib/apiGatewayCore/utils.js"></script>
+    <script type="text/javascript" src="apigClient.js"></script>
+
+# Use the SDK in your project
+
+To initialize the most basic form of the SDK:
+
+```
+var apigClient = apigClientFactory.newClient();
+```
+
+Calls to an API take the form outlined below. Each API call returns a promise, that invokes either a success and failure callback
+
+```
+var params = {
+    //This is where any header, path, or querystring request params go. The key is the parameter named as defined in the API
+    param0: '',
+    param1: ''
+};
+var body = {
+    //This is where you define the body of the request
+};
+var additionalParams = {
+    //If there are any unmodeled query parameters or headers that need to be sent with the request you can add them here
+    headers: {
+        param0: '',
+        param1: ''
+    },
+    queryParams: {
+        param0: '',
+        param1: ''
+    }
+};
+
+apigClient.methodName(params, body, additionalParams)
+    .then(function(result){
+        //This is where you would put a success callback
+    }).catch( function(result){
+        //This is where you would put an error callback
+    });
+```
+
+#Using AWS IAM for authorization
+To initialize the SDK with AWS Credentials use the code below. Note, if you use credentials all requests to the API will be signed. This means you will have to set the appropiate CORS accept-* headers for each request.
+
+```
+var apigClient = apigClientFactory.newClient({
+    accessKey: 'ACCESS_KEY',
+    secretKey: 'SECRET_KEY',
+    sessionToken: 'SESSION_TOKEN', //OPTIONAL: If you are using temporary credentials you must include the session token
+    region: 'eu-west-1' // OPTIONAL: The region where the API is deployed, by default this parameter is set to us-east-1
+});
+```
+
+#Using API Keys
+To use an API Key with the client SDK you can pass the key as a parameter to the Factory object. Note, if you use an apiKey it will be attached as the header 'x-api-key' to all requests to the API will be signed. This means you will have to set the appropiate CORS accept-* headers for each request.
+
+```
+var apigClient = apigClientFactory.newClient({
+    apiKey: 'API_KEY'
+});
+```
+
+
+
diff --git a/frontend/apigClient.js b/frontend/apigClient.js
@@ -0,0 +1,159 @@
+/*
+ * Copyright 2010-2016 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ *  http://aws.amazon.com/apache2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+var apigClientFactory = {};
+apigClientFactory.newClient = function (config) {
+    var apigClient = { };
+    if(config === undefined) {
+        config = {
+            accessKey: '',
+            secretKey: '',
+            sessionToken: '',
+            region: '',
+            apiKey: undefined,
+            defaultContentType: 'application/json',
+            defaultAcceptType: 'application/json'
+        };
+    }
+    if(config.accessKey === undefined) {
+        config.accessKey = '';
+    }
+    if(config.secretKey === undefined) {
+        config.secretKey = '';
+    }
+    if(config.apiKey === undefined) {
+        config.apiKey = '';
+    }
+    if(config.sessionToken === undefined) {
+        config.sessionToken = '';
+    }
+    if(config.region === undefined) {
+        config.region = 'us-east-1';
+    }
+    //If defaultContentType is not defined then default to application/json
+    if(config.defaultContentType === undefined) {
+        config.defaultContentType = 'application/json';
+    }
+    //If defaultAcceptType is not defined then default to application/json
+    if(config.defaultAcceptType === undefined) {
+        config.defaultAcceptType = 'application/json';
+    }
+
+
+    // extract endpoint and path from url
+    var invokeUrl = 'https://ebsgooj3d7.execute-api.us-east-1.amazonaws.com/test';
+    var endpoint = /(^https?:\/\/[^\/]+)/g.exec(invokeUrl)[1];
+    var pathComponent = invokeUrl.substring(endpoint.length);
+
+    var sigV4ClientConfig = {
+        accessKey: config.accessKey,
+        secretKey: config.secretKey,
+        sessionToken: config.sessionToken,
+        serviceName: 'execute-api',
+        region: config.region,
+        endpoint: endpoint,
+        defaultContentType: config.defaultContentType,
+        defaultAcceptType: config.defaultAcceptType
+    };
+
+    var authType = 'NONE';
+    if (sigV4ClientConfig.accessKey !== undefined && sigV4ClientConfig.accessKey !== '' && sigV4ClientConfig.secretKey !== undefined && sigV4ClientConfig.secretKey !== '') {
+        authType = 'AWS_IAM';
+    }
+
+    var simpleHttpClientConfig = {
+        endpoint: endpoint,
+        defaultContentType: config.defaultContentType,
+        defaultAcceptType: config.defaultAcceptType
+    };
+
+    var apiGatewayClient = apiGateway.core.apiGatewayClientFactory.newClient(simpleHttpClientConfig, sigV4ClientConfig);
+
+
+
+    apigClient.searchGet = function (params, body, additionalParams) {
+        if(additionalParams === undefined) { additionalParams = {}; }
+
+        apiGateway.core.utils.assertParametersDefined(params, ['q'], ['body']);
+
+        var searchGetRequest = {
+            verb: 'get'.toUpperCase(),
+            path: pathComponent + uritemplate('/search').expand(apiGateway.core.utils.parseParametersToObject(params, [])),
+            headers: apiGateway.core.utils.parseParametersToObject(params, []),
+            queryParams: apiGateway.core.utils.parseParametersToObject(params, ['q']),
+            body: body
+        };
+
+
+        return apiGatewayClient.makeRequest(searchGetRequest, authType, additionalParams, config.apiKey);
+    };
+
+
+    apigClient.searchOptions = function (params, body, additionalParams) {
+        if(additionalParams === undefined) { additionalParams = {}; }
+
+        apiGateway.core.utils.assertParametersDefined(params, [], ['body']);
+
+        var searchOptionsRequest = {
+            verb: 'options'.toUpperCase(),
+            path: pathComponent + uritemplate('/search').expand(apiGateway.core.utils.parseParametersToObject(params, [])),
+            headers: apiGateway.core.utils.parseParametersToObject(params, []),
+            queryParams: apiGateway.core.utils.parseParametersToObject(params, []),
+            body: body
+        };
+
+
+        return apiGatewayClient.makeRequest(searchOptionsRequest, authType, additionalParams, config.apiKey);
+    };
+
+
+    apigClient.uploadPut = function (params, body, additionalParams) {
+        if(additionalParams === undefined) { additionalParams = {}; }
+
+        apiGateway.core.utils.assertParametersDefined(params, ['object', 'folder', 'x-amz-meta-customLabels'], ['body']);
+
+        var uploadPutRequest = {
+            verb: 'put'.toUpperCase(),
+            path: pathComponent + uritemplate('/upload').expand(apiGateway.core.utils.parseParametersToObject(params, [])),
+            headers: apiGateway.core.utils.parseParametersToObject(params, ['x-amz-meta-customLabels']),
+            queryParams: apiGateway.core.utils.parseParametersToObject(params, ['object', 'folder', ]),
+            body: body
+        };
+
+
+        return apiGatewayClient.makeRequest(uploadPutRequest, authType, additionalParams, config.apiKey);
+    };
+
+
+    apigClient.uploadOptions = function (params, body, additionalParams) {
+        if(additionalParams === undefined) { additionalParams = {}; }
+
+        apiGateway.core.utils.assertParametersDefined(params, [], ['body']);
+
+        var uploadOptionsRequest = {
+            verb: 'options'.toUpperCase(),
+            path: pathComponent + uritemplate('/upload').expand(apiGateway.core.utils.parseParametersToObject(params, [])),
+            headers: apiGateway.core.utils.parseParametersToObject(params, []),
+            queryParams: apiGateway.core.utils.parseParametersToObject(params, []),
+            body: body
+        };
+
+
+        return apiGatewayClient.makeRequest(uploadOptionsRequest, authType, additionalParams, config.apiKey);
+    };
+
+
+    return apigClient;
+};
diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Smart Photo Album</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!--    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">-->
+    <!--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/1.0.0-beta16/shoelace.css">-->
+    <link rel="stylesheet" href="styles.css">
+    <script type="text/javascript" src="lib/axios/dist/axios.standalone.js"></script>
+    <script type="text/javascript" src="lib/CryptoJS/rollups/hmac-sha256.js"></script>
+    <script type="text/javascript" src="lib/CryptoJS/rollups/sha256.js"></script>
+    <script type="text/javascript" src="lib/CryptoJS/components/hmac.js"></script>
+    <script type="text/javascript" src="lib/CryptoJS/components/enc-base64.js"></script>
+    <script type="text/javascript" src="lib/url-template/url-template.js"></script>
+    <script type="text/javascript" src="lib/apiGatewayCore/sigV4Client.js"></script>
+    <script type="text/javascript" src="lib/apiGatewayCore/apiGatewayClient.js"></script>
+    <script type="text/javascript" src="lib/apiGatewayCore/simpleHttpClient.js"></script>
+    <script type="text/javascript" src="lib/apiGatewayCore/utils.js"></script>
+    <script type="text/javascript" src="apigClient.js"></script>
+</head>
+
+<body>
+<div class="container">
+    <div class="heading">
+        <h1>Smart Photo Album</h1>
+    </div>
+    <div class="card">
+        <h3>What would you like to see today?</h3>
+        <div class="searchbar">
+            <div class="searchbar-wrapper">
+                <div class="searchbar-left" onclick="searchPhoto()">
+                    <div class="search-icon-wrapper">
+                        <button class="search-button">SEARCH
+                        <span class="search-icon searchbar-icon">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="button">
+                        <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z">
+                        </path>
+                    </svg>
+                </span>
+            </button>
+                    </div>
+                </div>
+
+                <div class="searchbar-center">
+                    <div class="searchbar-input-spacer"></div>
+
+                    <input type="text" class="searchbar-input form-control" maxlength="2048" name="search"
+                           autocapitalize="off" id="note-textarea"
+                           autocomplete="off" title="Search" role="combobox" placeholder="Search your photo">
+                </div>
+
+                <div class="searchbar-right">
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="card">
+    <h3>Upload Images to album</h3>
+    <div class="drop_box">
+        <input id="file_path" type="file" name="search" hidden accept="image/jpeg, image/png" style="display:none;">
+        <button class="btn">Choose File</button>
+    </div>
+</div>
+<div>
+    <div class="banner-section" id="img-container">
+        <p id="displaytext"></p>
+    </div>
+</div>
+
+<img src="https://hw3-b2photos.s3.amazonaws.com/dog3.png" alt="">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+<script src="index.js"></script>
+<script src="apigClient.js"></script>
+</body>
+
+</html>