AWS AI Photo Album Web Application
AWS AI Photo Album Web Application - Support Voice Search
로그인 페이지 : https://s3.amazonaws.com/cc3-bucket2/apigateway-js-sdk/album.html
사진 업로드
키워드로 사진을 검색하면 발언이 다음과 같습니다.
태그는 검색 할 키워드입니다
{tag_a} 사진을 보여주세요.
{tag_a} 사진을 찾으십시오
{tag_a} 사진을 검색합니다
{tag_a} 및 {tag_b}로 사진을 보여주세요.
{tag_a} 및 {tag_b} 사진을 검색합니다
{tag_a} 및 {tag_b} 사진을 찾으십시오
{tag_a}
{tag_a} 및 {tag_b}
{tag_a} 및 {tag_b} 및 {tag_c}로 사진을 보여주세요.
{tag_a} 및 {tag_b} 및 {tag_c}
{tag_a} 및 {tag_b} 사진을 보여주세요
검색 결과를 프론트 엔드에 표시합니다.
보안 그룹 SG1 에서 photos ( E1 )라는 Elasticsearch 도메인을 작성하고 VPC 내부에 서비스를 배포하십시오.
Lambda Function은 Rekognition Service를 사용해야 하고이 서비스는 공개 웹 사이트에 속하므로 VPC에서 개인 서브넷을 추가하려면 기본 VPC를 구성해야합니다.
EC2 인스턴스를 작성하여 명령 줄 또는 우체맨을 사용하여 VPC에서 Elasticsearch를 테스트하십시오.
EC2 시작 :
ssh -i " cctest.pem " [email protected] curl 사용하여 POST 충족하고 Elasticsearch에서 조치를 GET .
인덱스 검색
curl https://vpc-photos-rsjxyzqwdjlisyiem3w4iwldya.us-east-1.es.amazonaws.com/photos/Photo/_search ? q=dog새 인덱스를 만듭니다
curl -d ' {"objectKey": "1.png", "bucket": "cc3-photos", "createdTimestamp": "2019-05-08 06:30:09", "labels": ["Pet", "Canine", "Puppy", "Dog", "Animal", "Mammal", "Golden Retriever", "Plant", "Grass"]} ' -H " Content-Type: application/json " -X POST https://vpc-photos-rsjxyzqwdjlisyiem3w4iwldya.us-east-1.es.amazonaws.com/photos/Photocc3-photos ( B1 )를 만듭니다.uploadPhoto 설정하고 Lambda 함수와 연결하십시오.두 개의 Lambda 기능은 Elasticsearch와 동일한 VPC 내부에 있으며 모든 Lambda 기능은 Elasticseacrh와 동일한 보안 그룹을 갖습니다.
index-photos ( LF1 )search-photos ( LF2 )$GET 메소드.PUT /photosGET /search?q={query text} < html >
< style type =" text/css " >
#search{
width: 80%;
margin: auto;
display: block;
text-align: center;
margin-top: 50px;
}
#searchin{
float: left;
width: 90%;
height: 30px;
}
#btngo{
float: left;
width: 10%;
height: 30px;
background-color: #333;
color: white;
border: none;
font-weight: bold;
}
#list{
padding: 0;
list-style-type: none;
display: none;
position: absolute;
z-index: 9999;
width: 80%;
margin-top: 30px;
max-height: 120px;
overflow: hidden;
overflow-y: scroll;
}
#list > li{
text-align: left;
padding: 5px;
display: none;
}
#list > li:hover{
background-color: #eee;
}
</ style >
< head >
< title > Photo Album </ title >
< link rel =" stylesheet " href =" https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css " integrity =" sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T " crossorigin =" anonymous " >
<!------ Include the above in your HEAD tag ---------->
< style type =" text/css " >
/* Container */
.container{
margin: 0 auto;
border: 0px solid black;
width: 50%;
height: 250px;
border-radius: 3px;
background-color: ghostwhite;
text-align: center;
}
/* Preview */
.preview{
width: 100px;
height: 100px;
border: 1px solid black;
margin: 0 auto;
background: white;
}
.preview img{
display: none;
}
/* Button */
.button{
border: 0px;
background-color: deepskyblue;
color: white;
padding: 5px 15px;
margin-left: 10px;
}
</ style >
</ head >
< body >
< div class =" container " >
< form method =" post " action ="" enctype =" multipart/form-data " id =" myform " >
< div class =' preview ' >
< img src ="" id =" img " width =" 100 " height =" 100 " >
</ div >
< div >
< input type =" file " id =" file " name =" file " />
< input type =" button " class =" button " value =" Upload " id =" but_upload " >
</ div >
</ form >
</ div >
< div id =" search " >
< div id =" container1 " >
< input type =" text " id =" searchin " placeholder =" Search... " />
< button id =" btngo " class =" btn btn-primary " type =" button " > Search </ button >
</ div >
<!-- <div id="container2">
<ul id="list" >
<li href="http://www.google.it">Google</li>
<li href="http://www.yahoo.it">Yahoo</li>
<li href="http://www.amazon.it">Amazon</li>
</ul>
</div> -->
</ div >
</ body >
< script
src =" https://code.jquery.com/jquery-3.4.1.min.js "
integrity =" sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo= "
crossorigin =" anonymous " > </ script >
< script src =" https://code.jquery.com/jquery-3.3.1.slim.min.js " integrity =" sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo " crossorigin =" anonymous " > </ script >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js " integrity =" sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1 " crossorigin =" anonymous " > </ script >
< script src =" https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js " integrity =" sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM " crossorigin =" anonymous " > </ script >
< script src =" https://unpkg.com/axios/dist/axios.min.js " > </ script >
< 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 >
< script type =" text/javascript " >
function showImage ( src , width , height , alt ) {
var img = document . createElement ( "img" ) ;
img . src = src ;
img . width = width ;
img . height = height ;
img . alt = alt ;
} ;
// upload photos
$ ( document ) . ready ( function ( ) {
$ ( "#but_upload" ) . click ( function ( ) {
// var fd = new FormData();
var files = $ ( '#file' ) [ 0 ] . files [ 0 ] ;
// fd.append('file',files);
// console.log("Uncomment to upload!!")
// console.log(fd)
console . log ( files )
console . log ( files . type )
console . log ( files . name )
let config = {
headers : { 'Content-Type' : files . type , "X-Api-Key" : "V3PD7IU9fo5emUn60jNIl3OQUJsbC2k75Lvl7tRK" , }
} ;
url = 'https://tg0swa682e.execute-api.us-east-1.amazonaws.com/test1/upload/cc3-photos/' + files . name
axios . put ( url , files , config ) . then ( response => {
// console.log(response.data)
alert ( "Upload successful!!" ) ;
} )
} ) ;
} ) ;
/*** Connect with API Gateway ***/
var apigClient = apigClientFactory . newClient ( ) ;
// after clcik the search button, show the search result
$ ( '#btngo' ) . click ( function ( ) {
query = $ ( '#searchin' ) . val ( ) ;
params = { q : query } ;
apigClient . searchGet ( params , { } , { } )
. then ( function ( result ) {
//This is where you would put a success callback
console . log ( result ) ;
// 这里写showImage的函数
let img_list = result . data
for ( var i = 0 ; i < img_list . length ; i ++ ) {
img_url = img_list [ i ] ;
new_img = document . createElement ( 'img' ) ;
new_img . src = img_url ;
document . body . appendChild ( new_img ) ;
}
} ) . catch ( function ( result ) {
//This is where you would put an error callback
console . log ( result ) ;
} ) ;
} ) ;
</ script >
</ html >
