TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
							<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#f76c5d" />
    <meta name="description" content="ArozOS Photo" />
    <link rel="manifest" crossorigin="use-credentials" href="manifest.json">
    <title>Photo</title>
    <link rel="stylesheet" href="../script/semantic/semantic.min.css">
    <script src="../script/alpine.min.js"></script>
    <script src="../script/jquery.min.js"></script>
    <script src="../script/semantic/semantic.min.js"></script>
    <script src="../script/ao_module.js"></script>
    <style>
        @media only screen and (min-width: 850px) {
            #menu {
                flex: 1;
                max-width: 200px;
                min-width: 200px;
                height: 100vh;
                display: block;
            }
            #showmenuBtn {
                display: none;
            }
        }
        
        @media only screen and (max-width: 850px) {
            #menu {
                display: none;
                height: 100vh;
            }
            #showmenuBtn {
                position: fixed;
                bottom: 1.8em;
                left: 1em;
            }
        }
        
        #display {
            flex: 1;
            margin: 0 0;
            height: 100vh;
        }
        
        #main {
            display: flex;
        }
        
        body {
            overflow: hidden;
        }

        .imagecard{
            border: 1px solid transparent;
        }

        .imagecard img{
            width: 100%;
        }

        #viewbox{
            margin-left: 0px !important;
            margin-top: 0px !important;
            position: relative;
           
        }

        #viewboxContainer{
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
        }

        #fadeplate{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: rgba(20,20,20,0.8);
            backdrop-filter: blur(2px);
        }

    </style>

</head>
<body>
    <script src="photo.js"></script>
    <div id="main" x-data='photoListObject()' x-init="init()">
        <div class="ui left vertical menu" id="menu">
            <div class="item" style="background-color: #f76c5d;">
                <img class="ui fluid image" src="img/banner.png">
            </div>
            <div class="item">
                Browse Photos
                <div class="menu">
                    <template x-for="vroot in vroots" x-init="getRootInfo()">
                        <a class="item" :rootpath="vroot[1]" x-on:click="updateRenderingPath(vroot[2]);"><i class="ui disk icon"></i> <span x-text="vroot[0] + ' (' + vroot[1] + ')'"></span></a>
                    </template>
                    
                </div>
            </div>
            <a id="parentFolderButton" class="item" x-on:click="parentFolder();" style="display:none;">
                <i class="reply icon"></i> Parent Folder
            </a>
            <div class="item">
                Sub Folders
                <div class="menu" style="max-height: 100px; overflow-y: auto;">
                    <div class="item" id="nosubfolder" style="display:none;">No Sub Folders</div>
                    <template x-for="folder in folders">
                        <a class="item" x-on:click="updateRenderingPath(folder);" ><i class="ui folder open icon"></i> <span x-text="extractFolderName(folder);"></span></a>
                    </template>
                    
                </div>
            </div>

            <div class="item">
                Tags
                <div class="menu" >
                    <div style="max-height: 100px; overflow-y: auto;">
                        <template x-for="key in Object.keys(tags)">
                            <a class="item" x-on:click="console.log( tags[key][0],tags[key][1]); images = tags[key]; $('#noimg').hide();" :filedata="encodeURIComponent(JSON.stringify(tags[key]));" ><i class="ui hashtag icon"></i> <span x-text="key"></span></a>
                        </template>
                    </div>
                    
                </div>
            </div>
            <a class="item" onclick="rescan(this);">Rescan <i class="ui search icon"></i></a>
            <a class="item" onclick="showSetting();">Settings <i class="ui setting icon"></i></a>

        </div>

        <div id="display">
            <div id="noimg" class="ui basic segment" style="display:none;">
                <h4 class="ui header">
                    <i class="red question icon"></i>
                    <div class="content">
                        Empty Folder
                        <div class="sub header">There are no photo stored in <span x-text="currentPath + '/'"></span></div>
                    </div>
                </h4>
            </div>
            <div id="viewboxContainer">
                <div id="viewbox" class="ui six cards viewbox">
                    <template x-for="image in images">
                        <div class="imagecard" style="cursor: pointer;" x-on:click="showImage($el); ShowModal();" :style="{width: renderSize + 'px', height: renderSize + 'px'}" :filedata="encodeURIComponent(JSON.stringify({'filename':image.split('/').pop(),'filepath':image}))">
                            <a class="image" x-init="updateImageSizes();">
                                <img :src="'../system/file_system/loadThumbnail?bytes=true&vpath=' + image">
                            </a>
                        </div>
                    </template>
                </div>
            </div>
        </div>

        
    </div>
    <button id="showmenuBtn" class="ui basic big icon button" onclick="toggleMenu();"><i class="ui content icon"></i></button>

    <!-- Photo Viewing Modal -->
    <div class="ui basic small modal viewer">
        <i class="close icon" style="margin-top: -2em;"></i>
        <div class="image content">
            <img id="fullImage" class="ui fluid image" src="" onload="$('.ui.modal.viewer').modal('refresh');"/>
        </div>
    </div>

    <div class="ui modal setting" x-data="settingObject()" x-init="init();">
        <i class="close icon"></i>
        <div class="header">
            Photo Classification Settings
        </div>
        <div class="content">
            <p><i class="angle right icon"></i> Select Neural Network Model for Classification</p>
            <div class="ui selection dropdown" id="selectedModel" onchange="updateSelectedModel($(this).dropdown('get value'));">
                <input type="hidden" name="nnm">
                <i class="dropdown icon"></i>
                <div class="default text">default</div>
                <div class="menu">
                    <div class="item" data-value="yolo3">YOLO 3</div>
                    <div class="item" data-value="darknet19">Darknet 19</div>
                </div>
            </div>
            <div class="ui green message" id="modelUpdated" style="display:none;">
                <div class="content">
                    <i class="green small checkmark icon"></i>   Model Updated
                </div>
            </div>
            <br>
            <small><i class="ui info icon"></i> For host with less than 1GB free memory, Darknet 19 is recommend. However, this might result is less accurate classification predictions.</small>
            <div class="ui divider"></div>
            <p><i class="angle right icon"></i> Base folder name to exclude when auto-tag generaton</p>
            <div id="newexc" class="ui action fluid input">
                <input type="text" placeholder="Private">
                <button class="ui blue basic button" x-on:click="addDir($el);"><i class="ui add icon"></i> Add</button>
              </div>
              <small>Example: To exclude *:/Photo/Private/, just fill in the folder name "Private"</small>
                <div class="ui middle aligned relaxed divided list">
                    <div class="item" id="noexcRecords" style="display:none;"><i class="remove icon"></i> No Exclude Directory Record</div>

                    <template x-for="excludedir in excludeDirs">
                        <div class="item">
                            <div class="right floated content">
                                <div class="ui negative small basic button" x-on:click="removeDir(excludedir);"><i class="remove icon"></i> Remove</div>
                            </div>
                            <img class="ui avatar image" src="./img/collection.svg">
                            <div class="content" x-text="excludedir + ' (Exclude *:/Photo/' + excludedir + '/)'">
                                
                            </div>
                        </div>
                    </template>
              </div>
        </div>
        <div class="actions">
            <div class="ui deny right button">
                    Close
            </div>
            <div class="ui positive left labeled icon button" x-on:click="save();">
                    Save
                <i class="checkmark icon"></i>
            </div>
        </div>
    </div>

</body>
<script>

    //Calculate image size on document ready

    $(window).on("resize ", function() {
        //check if the menu is opened
        if (window.innerWidth < 850) {
            $('#menu').slideUp('fast',function(){
            });
        }
        if (window.innerWidth >= 850) {
            $('#menu').slideDown('fast',function(){
            });
        }

        updateImageSizes();
    });

    function toggleMenu(){
        $('#menu').toggle('fast',function(){
            updateImageSizes();
            setTimeout(function(){
                updateImageSizes();
            }, 100);
        });
    }

    
</script>

</html>