jack
/
cocorobolx


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>CocoBlockly X – CocoRobo AI & IoT Module</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; scharset=UTF-8">
    <meta name="theme-color" content="#2C4FCD">
    <link type="text/css" rel="stylesheet" href="libs/materialize.min.css" media="screen,projection">
    <link rel="stylesheet" href="libs/codemirror/codemirror.css" />
    <link rel="stylesheet" href="libs/font-awesome.min.css" />
    <link rel="stylesheet" href="libs/summernote/summernote.css" />
    <link rel="stylesheet" href="libs/multi-select.css" />
    <link rel="stylesheet" href="src/blockpy.css" />
    <link rel="stylesheet" href="index.css" />
    <link rel="stylesheet" href="cocoblockly.css" />
    <!-- JQuery, D3, Math.js, Bootstrap -->
    <!-- <script type="text/javascript" src="libs/jquery.js"></script> -->
    <script type="text/javascript" src="uform.js"></script>
    <script type="text/javascript" src="js_libs/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="libs/jquery-ui.min.js"></script>
    <script type="text/javascript" src="libs/jquery.hotkeys.js"></script>
    <script type="text/javascript" src="libs/jquery.multi-select.js"></script>
    <!-- <script type="text/javascript" src="libs/materialize.min.js"></script> -->
    <!-- <script src="materialize/js/materialize.js"></script> -->
    <script type="text/javascript" src="libs/d3.min.js"></script>
    <script type="text/javascript" src="libs/math.0.19.0.min.js"></script>
    <!-- <script type="text/javascript" src="libs/bootstrap.min.js"></script>
    <script type="text/javascript" src="libs/bootstrap-wysiwyg.js"></script> -->
    <script type="text/javascript" src="libs/mindmup-editabletable.js"></script>
    <script type="text/javascript" src="libs/codemirror/codemirror.js"></script>
    <script type="text/javascript" src="libs/codemirror/python.js"></script>
    <script type="text/javascript" src="libs/codemirror/htmlmixed.js"></script>
    <script type="text/javascript" src="libs/codemirror/xml.js"></script>
    <script type="text/javascript" src="libs/knockout-3.4.0.js"></script>
    <script type="text/javascript" src="libs/stringify.js"></script>
    <!-- Summernote, a rich text editor -->
    <script type="text/javascript" src="libs/summernote/summernote.min.js"></script>
    <script type="text/javascript" src="libs/summernote/summernote-ext-hint.js"></script>
    <script type="text/javascript" src="libs/summernote/summernote-ext-video.js"></script>
    <!-- Blockly -->
    <!-- <script type="text/javascript" src="blockly/blockly_uncompressed.js"></script> -->
    <!-- <script type="text/javascript" src="blockly/blockly_compressed.js"></script>
    <script type="text/javascript" src="src/imported.js"></script>
    <script type="text/javascript" src="blockly/blocks_compressed.js"></script>
    <script type="text/javascript" src="src/python_to_blockly.js"></script>
    <script type="text/javascript" src="blockly/python_compressed.js"></script> -->
    <script type="text/javascript" src="blockly/blocks/python/head.js"></script>
    <script type="text/javascript" src="blockly/blocks/python/citys.js"></script>
    <script type="text/javascript" src="blockly/blocks/python/define_colors.js"></script>
    <script type="text/javascript" src="blockly/blocks/python/blockly_compressed.js"></script>
    <script type="text/javascript" src="blockly/blocks/python/blocks_compressed.js"></script>
    <script type="text/javascript" src="blockly/blocks/python/python_compressed.js"></script>
    <script type="text/javascript" src="blockly/blocks/python/blocks_microbit.min.js"></script>
    <script type="text/javascript" src="blockly/blocks/python/blocks_mpython.min.js"></script>
    <script type="text/javascript" src="blockly/blocks/python/python_microbit.min.js"></script>
    <script type="text/javascript" src="blockly/blocks/python/python_mpython.min.js"></script>
    <script type="text/javascript" src="src/imported.js"></script>
    <script type="text/javascript" src="src/python_to_blockly.js"></script>
    <script type="text/javascript" src="blockly/blocks/python/ai.js"></script>
    <script type="text/javascript" src="blockly/blocks/python/iot.js"></script>
    <script type="text/javascript" src="blockly/blocks/python/esp32.js"></script>
    <script type="text/javascript" src="blockly/blocks/python/extension_module.js"></script>
    <script type="text/javascript" src="blockly/blocks/python/mainwifi.js"></script>
    <script type="text/javascript" src="blockly/blocks/text.js"></script>
    <script type="text/javascript" src="blockly/blocks/utility.js"></script>
    <!-- <script type="text/javascript" src="blockly/generators/utility.js"></script> -->
    <!--
    <script type="text/javascript" src="blockly/blocks/math.js"></script>
    <script type="text/javascript" src="blockly/generators/python/math.js"></script>-->
    <script type="text/javascript" src="blockly/generators/python.js"></script>
    <script type="text/javascript" src="blockly/blocks/python/time.js"></script>
    <script type="text/javascript" src="blockly/generators/python/time.js"></script>
    <script type="text/javascript" src="blockly/blocks/python/mainwifi.js"></script>
    <script type="text/javascript" src="blockly/generators/python/mainwifi.js"></script>
    <script type="text/javascript" src="blockly/blocks/python/screen.js"></script>
    <script type="text/javascript" src="blockly/generators/python/screen.js"></script>
    <script type="text/javascript" src="/blockly/msg/index.js"></script>
    <script type="text/javascript" src="src/blockly/FileSaver.js"></script>
    <script type="text/javascript" src="src/blockly/term.js"></script>
    <script type="text/javascript" src="src/blockly/web.js"></script>
    <script type="text/javascript" src="src/blockly/load.js"></script>
    <script type="text/javascript" src="src/blockly/Devices.js"></script>
    <!-- Skulpt -->
    <script type="text/javascript" src="skulpt/dist/skulpt.min.js"></script>
    <script type="text/javascript" src="skulpt/dist/skulpt-stdlib.js"></script>
    <!-- Source Code -->
    <script type="text/javascript" src="src/utilities.js"></script>
    <script type="text/javascript" src="src/python_errors.js"></script>
    <script type="text/javascript" src="src/ast_node_visitor.js"></script>
    <script type="text/javascript" src="src/abstract_interpreter.js"></script>
    <script type="text/javascript" src="src/pytifa.js"></script>
    <script type="text/javascript" src="src/abstract_interpreter_definitions.js"></script>
    <script type="text/javascript" src="src/dialog.js"></script>
    <script type="text/javascript" src="src/storage.js"></script>
    <script type="text/javascript" src="src/printer.js"></script>
    <script type="text/javascript" src="src/interface.js"></script>
    <script type="text/javascript" src="src/server.js"></script>
    <script type="text/javascript" src="src/english.js"></script>
    <script type="text/javascript" src="src/corgis.js"></script>
    <script type="text/javascript" src="src/history.js"></script>
    <script type="text/javascript" src="src/presentation.js"></script>
    <script type="text/javascript" src="src/editor.js"></script>
    <script type="text/javascript" src="src/feedback.js"></script>
    <script type="text/javascript" src="src/toolbar.js"></script>
    <script type="text/javascript" src="src/sk_mod_instructor_extended.js"></script>
    <script type="text/javascript" src="src/sk_mod_instructor.js"></script>
    <script type="text/javascript" src="src/engine.js"></script>
    <script type="text/javascript" src="src/main.js"></script>
    <!-- FileSaver JS -->
    <script src="src/js_libs/FileSaver.min.js"></script>
    <!-- JS Diff -->
    <script src="src/js_libs/diff.js"></script>
    <!-- Prettify JS -->
    <script src="src/prettify/prettify.js"></script>
    <!-- Lazyload JS -->
    <script src="src/lazysize/lazysizes.min.js"></script>
    <!-- Socket.io -->
    <script src="src/socket.io-client/dist/socket.io.js"></script>
    <!-- clipboard -->
    <script src="src/clipboard/dist/clipboard.js"></script>
    <!-- Event Proxy -->
    <script type="text/javascript" src="src/blockly/eventproxy.js"></script>
    <!-- jQuery and Materialize JS -->
    <!-- <script src="js_libs/jquery-2.1.3.min.js"></script> -->
    <script src="materialize/js/materialize.js"></script>
    <!-- echarts -->
    <script src="./js_libs/echarts.min.js"></script>
    <!-- platform.js -->
    <!-- Desktop version of Ardublockly JS, needs to be loaded first. -->
    <!-- <script src="ardublockly_desktop.js"></script> -->
    <script type="text/javascript" src="src/webcam.min.js"></script>
    <script src="src/platformjs/platform.js"></script>
    <script src="ardublockly_lang.js"></script>
    <script src="ardublockly_toolbox.js"></script>
    <!--  <script src="ardublockly_blockly.js"></script> -->
    <script src="ardublocklyserver_ajax.js"></script>
    <script type="text/javascript" src="src/blockly/ardublockly_desktop.js"></script>
    <script type="text/javascript" src="src/blockly/ardublockly_design.js"></script>
    <script type="text/javascript" src="src/blockly/ardublockly_blockly.js"></script>
    <script type="text/javascript" src="src/blockly/ardublockly.js"></script>
    <script type="text/javascript" src="src/blockly/cocoblockly.js"></script>
    <script src="src/blockly/account.js"></script>
    <script src="src/blockly/socket.js"></script>
    <script src="src/blockly/machine.js"></script>
    <script type="text/javascript" src="./libs/clipboard.min.js"></script>
    <script type="text/javascript" src="./index.js"></script>
</head>

<body>
    <div id="white-box">
        <div id="preloader">
            <img src="./images/preloader.gif">
            <h4 style="margin:0;">Loading...</h4>
        </div>
    </div>
    <!-- modal -->
    <!-- <div class="modals">
        <span></span>
    </div> -->
    <div id="container">
        <!-- Horizontal Navigation bar -->
        <nav id="nav_" class="nav-fixed arduino_teal" style="overflow:hidden;background-color: #3454D2;">
            <div id="nav_shadow" class="shadowbox" style="display:none;"></div>
            <div class="nav-wrapper"
                style="min-width: 1200px; padding:0px 10px;display: flex;justify-content: space-between;position:static;">
                <a id="logo-container" class="brand-logo" style="display: none;">
                    <span style="font-size:28px;font-family:'GT Walsheim Pro Trial Bold';"
                        class="app_title translatable_title">CocoBlockly X</span>
                    <!-- Sketch name editable text field -->
                    <span class="sketch_name_wrapper" style="position:relative">
                        <!-- <a id="button_delete" class="lang_resize" style="position:relative">
                        <img style="height:28px;margin-top:20px" src="./icons/trash.png"> -->
                </a>
                <ul id="nav-mobile" class="hide-on-med-and-down" style="display: inline-block;">
                    <!-- <li>
                        <img style="height: 40px;margin-top: 10px;" class="left nav-icon" src="./icons/logo.png">
                    </li> -->

                    <li style="display: block;">
                        <a id="nav_language" class='dropdown-button lang_resize' data-activates='languages'
                            style="position:relative;padding: 0 25px;">
                            <span class="translatable_language" style="display: none;">Language</span>
                            <img class="left nav-icon" src="/images/language.png" style="width: 30px;height: 50px;">
                            <i class="down" style="position: relative;top: 30px;left: 2px;float: right;"></i>
                        </a>
                        <ul id='languages' class='dropdown-content active'>
                            <li id="EN" onclick="changeLanguage('en')">
                                <span>English</span>
                            </li>
                            <li id="TC" onclick="changeLanguage('zh-hant')">
                                <span>繁体中文</span>
                            </li>
                            <li id="CN" onclick="changeLanguage('zh-hans')">
                                <span>简体中文</span>
                            </li>
                        </ul>
                    </li>

                    <!-- <li>
                        <span class="vertical-separator"></span>
                    </li> -->
                    <li style="display: block;">
                        <a id="local_storage" class='dropdown-button lang_resize' data-activates='local_saveOrOpen'
                            style="position:relative;padding: 0 25px;">
                            <span class="translatable_files">文件</span>
                            <!-- <img class="left nav-icon" src="./icons/local_storage.png"> -->
                        </a>
                        <ul id='local_saveOrOpen' class='dropdown-content' style="top:62px">
                            <li id="button_load">
                                <span class="translatable_import_local_file">导入本地文件</span>
                            </li>
                            <li id="button_import_cloud">
                                <span class="translatable_import_cloud_file">导入云端文件</span>
                            </li>
                            <li id="button_save">
                                <span class="translatable_export_local_file">保存到本地</span>
                            </li>
                            <li id="button_save_cloud">
                                <span class="translatable_export_cloud_file">保存到云端</span>
                            </li>
                        </ul>
                        <div id="fileImport" class="btn" style="display:none;">
                            <input type="file" accept=".py">
                        </div>
                        <div id="xmlFileImport" class="btn" style="display:none;">
                            <input type="file" accept=".xml">
                        </div>
                        <div id="pyFileImport" class="btn" style="display:none;">
                            <input type="file" accept=".py">
                        </div>
                    </li>
                    <li style="display: block;">
                        <a id="local_connect" class='dropdown-button lang_resize' data-activates='local_connect_select'
                            style="position:relative;padding: 0 25px;">
                            <span class="translatable_connect">连接</span>
                        </a>
                        <ul id='local_connect_select' class='dropdown-content' style="top:62px">
                            <li id="plugin_download" href="javaScript:(0)">
                                <span class="translatable_download_uploader">下载安装程序</span>
                            </li>
                            <li id="button_upgrade_firmware">
                                <span class="translatable_upgrade_firmware">固件升级</span>
                            </li>
                            <li id="button_connection_type">
                                <span class="translatable_connect_method">连接方式</span>
                            </li>
                        </ul>
                    </li>


                    <li style="display: block;">
                        <a id="help" class='dropdown-button lang_resize' target="_blank" href="//x-help.cocorobo.cn"
                            style="position:relative;padding: 0 25px;">
                            <span class="translatable_help_board">帮助</span>

                        </a>
                        <!-- <a id="nav_devices" class='dropdown-button lang_resize' style="position:relative">
                            <span class="translatable_devices">Devices</span>
                            <img class="left nav-icon" src="./icons/Devices.png">
                        </a> -->
                    </li>


                    <li>
                        <div style="margin: 0px 20px 0px 0px;">
                            <input type="text" value="A.I. Module" id="iot_modules" readonly
                                class="selectMode_input browser-default"
                                style="font-size: 0.9rem;border: none;width: 130px;">
                            <i class="down" style="position: relative;top: -20px;float: right;"></i>
                            <div class="downbox MouduleBox" id="downboxModule">
                                <div style="border: none;"><a href="javaScript:(0)" style="color: #424242 !important;"
                                        class="translatable_ai_module">A.I. Module</a></div>
                                <div style="border: none;"><a href="javaScript:(0)" style="color: #424242 !important;"
                                        class="translatable_iot_module">IoT Module
                                        Mode</a></div>
                                <div style="border: none;"><a href="/python" style="color: #424242 !important;"
                                        class="translatable_python_full_screen_mode" target="_blank">Cloud
                                        Mode</a></div>
                            </div>
                        </div>
                    </li>


                    <li class="Mode_select_box">
                        <div class="ModeSelectBox">
                            <div class="ModeSelect">
                                <div style="font-size: 0.9rem;">样例 </div>
                                <i class="down" style="position: relative;top: -34px;left: 20px;float: right;"></i>
                                <div class="downbox ModeBox downbox-style">
                                    <div>
                                        <div>人工智能教材程序</div>
                                        <i class="downboxdown"></i>
                                        <div class="Hardware2 HarxA" style="height:auto;top:-35px">
                                            <div class="Hardware9">
                                                <div>三年级</div>
                                                <i class="downboxdown"></i>
                                                <ul class="Hardware4 HarxA">
                                                    <li>录制语音指令</li>
                                                    <li>语音识别台灯</li>
                                                    <!-- <li>人脸识别防盗门</li> -->
                                                </ul>
                                            </div>
                                            <div class="Hardware5">
                                                <div>五年级</div>
                                                <i class="downboxdown"></i>
                                                <ul class="Hardware4 HarxA">
                                                    <li>录制语音指令</li>
                                                    <li>智能窗帘</li>
                                                    <li>水果采摘机器人</li>
                                                    <!-- <li>智能质检机器人</li> -->
                                                </ul>
                                            </div>
                                            <div class="Hardware6">
                                                <div>六年级</div>
                                                <i class="downboxdown"></i>
                                                <ul class="Hardware4 HarxA">
                                                    <!-- <li>无人驾驶循环小车</li> -->
                                                    <li>智能交通信号灯</li>
                                                    <li>导盲项链</li>
                                                    <!-- <li>二维码包裹分拣机器人</li> -->
                                                </ul>
                                            </div>
                                            <div class="Hardware7">
                                                <div>七年级</div>
                                                <i class="downboxdown"></i>
                                                <ul class="Hardware4 HarxA">
                                                    <li>人脸辨识电子警察</li>
                                                </ul>
                                            </div>
                                            <div class="Hardware8">
                                                <div>八年级</div>
                                                <i class="downboxdown"></i>
                                                <ul class="Hardware4 HarxA">
                                                    <li>支付台</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div>
                                        <div>IoT 模块基础案例</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA">
                                            <li>侧边按键控制蜂鸣器</li>
                                            <li> 侧边按键控制开关 LED</li>
                                            <li> 触摸区域控制 LED</li>
                                            <li> 蜂鸣器警报</li>
                                            <li> 黑暗环境感应光照灯</li>
                                            <li> 倾斜方向感应 LED</li>
                                            <li> 湿度报警器</li>
                                            <li> 摇晃感应 LED</li>
                                            <li> LED 显示光线强度值</li>
                                        </ul>
                                    </div>
                                    <div>
                                        <div>IoT 模块扩展功能案例</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA">
                                            <li>使用 LED 灯屏</li>
                                            <li>使用电机驱动模块</li>
                                            <li>使用游戏手柄 + LED 灯屏</li>
                                            <li>使用游戏手柄 + 屏幕模块</li>
                                            <li>在扩展模块上控制舵机</li>
                                            <li>屏幕显示Hello World</li>
                                            <li>屏幕绘制线条动画</li>
                                            <li>按键控制屏幕直线转动</li>
                                            <li>按键控制颜色切换</li>
                                            <li>计步器</li>
                                        </ul>
                                    </div>
                                    <div>
                                        <div>IoT 模块联网案例</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA">
                                            <li>按键发送光照数据至 CocoCloud</li>
                                            <li>按键发送环境数据至 IFTTT</li>
                                            <li>按键获取光照数据并根据条件亮灯</li>
                                            <li>定时发送环境数据至 CocoCloud</li>
                                            <li>定时接收环境数据并根据条件亮灯</li>
                                            <li>建立 WiFi 热点并显示连接设备数量</li>
                                            <li>局域网环境数据存储 - 服务器端</li>
                                            <li>局域网环境数据获取 - 客户端</li>
                                            <li>连接 WiFi 网络</li>
                                            <li>模块间按钮状态存储 - 服务端</li>
                                            <li>模块间按钮状态接收 - 客户端</li>
                                            <li>模块间进行 WebSocket 实时通信 - 发送端</li>
                                            <li>模块间进行 WebSocket 实时通信 - 接收端</li>
                                            <li>同步网络时间</li>
                                            <li>数字手表显示实时时间</li>
                                        </ul>
                                    </div>
                                    <div>
                                        <div>IoT工作坊上</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA">
                                            <li>01 点亮正中间的LED灯</li>
                                            <li>02 点亮所有LED灯</li>
                                            <li>03 流水灯</li>
                                            <li>04 蜂鸣器警报</li>
                                            <li>05 8-bit音乐</li>
                                            <li>06 串口通讯：按钮开关</li>
                                            <li>07 串口通讯：触摸开关</li>
                                            <li>08 按钮开关蜂鸣器</li>
                                            <li>09 触摸开关灯</li>
                                            <li>10 补光装置</li>
                                            <li>11 湿度报警器</li>

                                        </ul>
                                    </div>
                                    <div>
                                        <div>IoT工作坊下</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA">
                                            <li>12 晃晃灯</li>
                                            <!-- <li>13 连接Wi-Fi</li> -->
                                            <li>14 连接Wi-Fi并显示连接状态</li>
                                            <li>15 建立热点并显示已连接的设备数</li>
                                            <li>16 亮度数据上传与下载</li>
                                            <li>17 舵机来回摆动</li>
                                            <li>19 舵机定时摆动</li>
                                            <li>20 按键控制舵机</li>
                                            <li>18 门（人脸识别）</li>
                                            <li>体验 iot-机械车（语音控制）</li>
                                            <li>体验 iot-机械人（陀螺仪）</li>
                                            <li>体验 iot-机械人（姿态识别）</li>
                                            <li>体验 iot-台灯（语音控制）</li>
                                        </ul>
                                    </div>
                                    <div>
                                        <div>AI 模块机器学习案例</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA">
                                            <li>垃圾分类识别（香港版）</li>
                                            <li>人脸检测</li>
                                            <li>物体识别</li>
                                            <li>人脸检测</li>
                                            <li>物体识别</li>
                                            <li>语音录制</li>
                                            <li>语音识别</li>
                                            <li>MNIST 手写数字识别</li>
                                        </ul>
                                    </div>
                                    <div>
                                        <div>AI 模块基础案例</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA">
                                            <li>按键控制屏幕时针转动</li>
                                            <li style="display:none">按键控制图片改变颜色制式</li>
                                            <li style="display:none">按键控制图片进行反色变化</li>
                                            <li>按键控制颜色切换</li>
                                            <li>迷你相机</li>
                                            <li>屏幕方向旋转</li>
                                            <li>屏幕绘制线条动画</li>
                                        </ul>
                                    </div>
                                    <div>
                                        <div>AI 模块扩展功能案例</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA">
                                            <li>使用 LED 灯屏</li>
                                            <li>使用电机驱动模块</li>
                                            <li>使用游戏手柄 + 屏幕模块</li>
                                            <li>在扩展模块上控制舵机</li>
                                            <li>贪吃蛇</li>
                                        </ul>
                                    </div>
                                    <div>
                                        <div>AI AI 模块视觉案例</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA">
                                            <li>按键改变相机图像的亮度</li>
                                            <li>区域颜色分析</li>
                                            <li>识别 QR 二维码</li>
                                            <li>寻线（黑线）</li>
                                            <li>寻找绿色的圆形</li>
                                            <li>寻找绿色区域并进行追踪</li>
                                        </ul>
                                    </div>
                                    <div>
                                        <div>AI AI 模块影音案例</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA">
                                            <li style="display:none">播放录制的视频档案</li>
                                            <li>播放音乐</li>
                                            <li style="display:none">录制摄像头画面并保存</li>
                                            <li>麦克风声音频谱分析</li>
                                        </ul>
                                    </div>
                                    <div>
                                        <div>AI基础篇案例上</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA">
                                            <li>Hello World</li>
                                            <li>螢幕顯示 Hello World</li>
                                            <li>畫布應用</li>
                                            <li>迷你相機</li>
                                            <li>簡易物體識別</li>
                                        </ul>
                                    </div>
                                    <div>
                                        <div>AI 基础篇案例下</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA">
                                            <li>物體識別進階</li>
                                            <li>人臉檢測</li>
                                            <li>顏色識別</li>
                                            <li>形狀識別（圓形）</li>
                                            <li>形狀識別（矩形）</li>
                                            <li>音頻分析</li>
                                        </ul>
                                    </div>
                                    <div>
                                        <div>AI 扩展使用案例</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA">
                                            <li>私服马达</li>
                                            <li>超声波感测器</li>
                                            <!-- <li>测距仪</li> -->
                                            <li>灯带</li>
                                            <li id="AI_Workshop_III_ex5_Microbit">Microbit</li>
                                            <li id="AI_Workshop_III_ex6_MicrobitFace">人脸检测</li>
                                            <li>电动门</li>
                                        </ul>
                                    </div>
                                    <div>
                                        <div>AI 垃圾分类</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA">
                                            <li>私服马达</li>
                                            <li>超声波感测器</li>
                                            <li>电动门</li>
                                        </ul>
                                    </div>
                                    <div>
                                        <div>AI 自动驾驶</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA">
                                            <li>第一場-路標識別(香港標識)</li>
                                            <li>第二場-巡線（雙線）</li>
                                            <li>第二場-巡線（單線-靠左行駛）)</li>
                                            <li>第一場-路標識別(香港標識)</li>
                                        </ul>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </li>

                    <!-- help button -->

                    <!-- <li id="cloudBtn-shares">
                        <i class="material-icons" style="margin-left:5px;cursor: pointer;">share</i>
                    </li>
                    <i id="workspace_screenshot" class="material-icons sketch_name_icon right"
                        style="margin-left:5px;cursor: pointer;">photo_camera</i>
                    <i id="button_delete" class="material-icons sketch_name_icon right"
                        style="margin-left:5px;cursor: pointer;">delete</i> -->
                </ul>
                <!-- <i id="workspace_screenshot" class="material-icons sketch_name_icon right"
                    style="margin-left:5px;cursor: pointer;">photo_camera</i> -->
                <!-- <i class="material-icons sketch_name_icon right">create</i> -->
                <!-- <input id="sketch_name" class="sketch_name" type="text"> -->
                <input id="sketch_name_w" class="sketch_name" type="text" name="wifi" style="display:none">
                </span>
                <!-- </a> -->
                <!-- Horizontal Navbar links only shown on large resolutions -->
                <ul id="nav-mobile" class="right hide-on-med-and-down nav-mobile-right" style="display: flex;">
                    <!-- AI Demo -->
                    <!-- <li>
                    <a id="AI_experience" class='dropdown-button lang_resize' data-activates='AI_experience_dropdown' style="position:relative">
                        <span class="translatable_AI_experience">AI</span>
                        <img class="left nav-icon" src="./icons/nav-ai-experience.png">
                    </a>
                    <ul id='AI_experience_dropdown' class='dropdown-content' style="top:62px">
                        <li id="webcam" class='modal-trigger' href="#webcam_capture_modal">
                            <span class="translatable_AI_emotion">Emotion Recognotion</span>
                        </li>
                        <li class="divider"></li>
                        <li id="voice-input" class='modal-trigger' href="#voice_input_modal">
                            <span class="translatable_AI_speech">Speech Recognotion</span>
                        </li>
                    </ul>
                </li> -->
                    <!-- help button -->
                    <li style="display: none;">
                        <a id="help" style="display:none" class='dropdown-button lang_resize'
                            data-activates="help_board" style="position:relative">
                            <!-- <i class="material-icons left" style="margin-right: 5px;font-size: 34px;">help_outline</i> -->
                            <span class="translatable_help_board">Help</span>
                            <img class="left nav-icon" src="./icons/nav_help.png">
                        </a>
                        <ul id='help_board' class='dropdown-content' style="top:62px">
                            <li id="">
                                <a href="http://help.cocorobo.cn/" target="_blank">
                                    <span class="translatable_tutorial">Tutorial</span>
                                </a>
                            </li>
                            <!-- <li class="divider"></li>
                        <li>
                            <a href="#tourmode" class="modal-trigger">
                                <span class="translatable_tour">Start Tour</span>
                            </a>
                        </li> -->
                            <li class="divider"></li>
                            <!-- <li>
                                <a href="#env_detect" class="modal-trigger">
                                    <span class="translatable_env_detect">Environment Detect</span>
                                </a>
                            </li> -->
                            <li class="divider"></li>
                            <li>
                                <a href="http://help.cocorobo.cn/#/changelog" target="_blank">
                                    <span class="translatable_changelog">Change Log</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li style="display:none;">
                        <select onchange="selectmode(this)" id="mode"
                            style="outline:0;position:relative;color: #fff;font-weight: 500;width: 175px;height: 35px;border-radius: 30px;background: #fff0;border: 2px solid #fff;margin: 15px 35px 0px 0px;display: block;">
                            <option value="" style="color: #000;">AI Mode</option>
                            <option value="" style="color: #000;">Main Mode</option>
                        </select>
                    </li>


                    <li id="cloudBtn-shares">
                        <i class="material-icons" style="margin-left:5px;cursor: pointer;display: none;">share</i>
                    </li>
                    <i id="workspace_screenshot" style="margin-left:5px;cursor: pointer;">
                        <img src="/images/screenshot.png" style="width: 50px;height: 45px;margin-top:8px;" />
                    </i>
                    <i id="button_delete" class="material-icons sketch_name_icon right"
                        style="margin-left:5px;cursor: pointer;display: none;">delete</i>

                    <li>
                        <input id="sketch_name" placeholder="请输入作品名称" class="sketch_name"
                            style="background: #fff;padding: 4px 10px 4px 20px;color:#222222;width:220px;font-style: initial;"
                            type="text">
                    </li>

                    <li>
                        <button id="downloadbutton" class="translatable_sketch_save"
                            style="color: #fff;font-weight: 700;background: #4A6AFF;border: none;font-size: 15px;padding: 13px 20px;height: 40px;">保存</button>
                    </li>

                    <!-- App Center demo -->
                    <!-- <li>
                        <a id="app_center_title" href="#app_center_modal" class="modal-trigger lang_resize"
                            style="position:relative">
                            <span id="app_center_title_demo">
                                <span class="translatable_labscenter">Labs</span>
                                <img class="left nav-icon" src="./icons/cocoblockly-navbar_labs-icon.png">
                            </span>
                        </a>
                    </li> -->
                    <!-- <li>
                        <a id="nav_learn" class='dropdown-button lang_resize' data-activates="learn_board"
                            style="position:relative">
                            <i class="material-icons left" style="margin-right: 5px;font-size: 34px;">help_outline</i>
                            <span class="translatable_learn_board">Files</span>
                            <img class="left nav-icon" src="./icons/learn_nav_icon.png">
                        </a>
                        <ul id='learn_board' class='dropdown-content'>
                            <li>
                                <a href="//edu.cocorobo.cn/" target="_blank">
                                    <span class="translatable_cocoedu">Education Platform</span>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="//aihub.cocorobo.cn" target="_blank">
                                    <span class="translatable_learn_principle">Learn AI: Theory</span>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="//aihub.cocorobo.cn/vision" target="_blank">
                                    <span class="translatable_learn_vision">Learn AI: Vision</span>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="//aihub.cocorobo.cn/speech" target="_blank">
                                    <span class="translatable_learn_speech">Learn AI: Speech</span>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="//aihub.cocorobo.cn/text" target="_blank">
                                    <span class="translatable_learn_text">Learn AI: Text</span>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="//beta.aihub.cocorobo.cn/art" target="_blank">
                                    <span class="translatable_learn_art">Learn AI: Art</span>
                                </a>
                            </li>
                        </ul>
                    </li> -->
                    <!-- <li>
                        target="_blank"
                        <a id="help" style="display: none;" class='dropdown-button lang_resize'
                            href="//x.help.cocorobo.cn" style="position:relative">
                            <i class="material-icons left" style="margin-right: 5px;font-size: 34px;">help_outline</i>
                            <span class="translatable_help_board">Help</span>
                            <img class="left nav-icon" src="./icons/nav_help.png">
                        </a>
                    </li> -->
                    <!-- <li>
                        <a target="_blank" id="nav_journal" class='dropdown-button lang_resize' href="/md.html"
                            style="position:relative">
                            <span class="translatable_journal">日志</span>
                            <img class="left nav-icon" src="./icons/news.png">
                        </a>
                    </li> -->
                    <!-- <li>

                        <a id="help" class='dropdown-button lang_resize' target="_blank" href="//x-help.cocorobo.cn"
                            style="position:relative">
                            <i class="material-icons left" style="margin-right: 5px;font-size: 34px;">help_outline</i>
                            <span class="translatable_help_board">Help</span>
                            <img class="left nav-icon" src="./icons/nav_help.png">
                        </a>
                        <a id="nav_devices" class='dropdown-button lang_resize' style="position:relative">
                            <span class="translatable_devices">Devices</span>
                            <img class="left nav-icon" src="./icons/Devices.png">
                        </a>
                    </li> -->
                    <!-- <li style="display: block;">
                        <a id="local_storage" class='dropdown-button lang_resize' data-activates='local_saveOrOpen'
                            style="position:relative">
                            <span class="translatable_storage">Files</span>
                            <img class="left nav-icon" src="./icons/local_storage.png">
                        </a>
                        <ul id='local_saveOrOpen' class='dropdown-content' style="top:62px">
                            <li id="button_cloud" class='modal-trigger' href="#cloud_storage_modal">
                                <span class="translatable_cloud_storage">Cloud</span>
                            </li>
                            <li class="divider"></li>
                            <li id="button_load">
                                <span class="translatable_import">Import</span>
                            </li>
                            <li class="divider"></li>
                            <li id="button_save">
                                <span class="translatable_export">Export</span>
                            </li>
                        </ul>
                        <div id="fileImport" class="btn" style="display:none;">
                            <input type="file" accept=".py">
                        </div>
                        <div id="xmlFileImport" class="btn" style="display:none;">
                            <input type="file" accept=".xml">
                        </div>
                        <div id="pyFileImport" class="btn" style="display:none;">
                            <input type="file" accept=".py">
                        </div>
                    </li> -->
                    <!-- <li>
                        <a id="nav_language" class='dropdown-button lang_resize' data-activates='languages'
                            style="position:relative">
                            <span class="translatable_language">Language</span>
                            <img class="left nav-icon" src="./icons/language2.png">
                        </a>
                        <ul id='languages' class='dropdown-content active'>
                            <li onclick="changeLanguage('en')">
                                <a>English</a>
                            </li>
                            <li class="divider"></li>
                            <li onclick="changeLanguage('zh-hant')">
                                <a>繁体中文</a>
                            </li>
                            <li class="divider"></li>
                            <li onclick="changeLanguage('zh-hans')">
                                <a>简体中文</a>
                            </li>
                        </ul>
                    </li> -->
                    <!-- <li>
                        <span class="vertical-separator"></span>
                    </li> -->
                    <!-- <li>
                        <a id="nav_account" href="#login_modal" class="modal-trigger lang_resize"
                            style="position:relative"
                            onclick="$('#api-key').html(''); $('#api-key').html($('#cloud_events').val()); document.getElementById('api-key').value = $('#cloud_events').val();">
                            <span id="account_alias"></span>
                            <button id="account_loginTitle" class="translatable_login_title"
                                style="color: #fff;font-weight: 500;width: 80px;height: 35px;border-radius: 30px;background: #fff0;border: 2px solid #fff;margin: 0 0 0 15px;">Login</button>
                            <span id="account_loginTitle" class="translatable_login_title">Login</span>
                            <img class="nav-icon2 left" src="./icons/user.png">
                        </a>
                    </li> -->
                    <!--<li>
                        <a id="back_home" class="lang_resize" target="_blank" href="//cocorobo.cn/online/"
                            style="position:relative">
                            <img class="nav-icon2" src="./icons/home_icon.png">
                        </a>
                    </li> -->
                </ul>
            </div>
        </nav>
        <!-- shadow -->
        <div id="main_shadow" class="shadowbox" style="display:none;">
            <div id="shadow_content" class="shadow_container">
                <div class="shadow_top">
                    <img src="./images/drag_import.png" style="width:200px">
                    <p class="translatable_drag_import">Drag and drop your file to here</p>
                </div>
            </div>
        </div>
        <!-- Content -->
        <div id="main_content" style=" width:100%;">
            <div id="term" style=" width:100%; height:70%;display:none">
            </div>
            <div style="height:100%;" id="blockpy-div">
                <div>
                    <div id='blockpy-content'>
                        <div class="blockpy-editor">
                            <div class="white blockpy-blocks blockpy-editor-menu"> <img class="fullscreenIcon"
                                    src="./images/icon-fullscreen.svg"> <img class="fullscreenIcon hidden"
                                    src="./images/icon-fullscreen-exit.svg">
                                <div class='blockly-div' style="width:100%;height:100%;"></div>
                            </div>
                        </div>
                        <div id='sss' style='display:block;overflow: auto;'>
                            <div id="py-editor" class="blockpy-editor card-panel"
                                style='height:calc(100% - 245px);display:block;overflow:auto'>
                                <div class="card-header"
                                    style='position:relative;height: 45px;line-height: 45px;background: #E6F1FF;border-bottom: unset;'>
                                    <!--<span class="header-icon">&lt &gt</span>--> <span id="python_SourceCode" class="header-text translate-code
                                            translatable_pythonSourceCode switch_box switch_select"
                                        style='margin-left: 25px;'>Python
                                        Source Code</span> <span id="Serial_Interaction"
                                        class="header-text translatable_serial_plotter switch_box1">串口数据显示</span>

                                    <span id="Serial_Display"
                                        class="header-text translatable_serial_visualization switch_box2">串口数据可视化</span>

                                    <a class="blockpy-toolbar-edit" style="position:absolute;top: 5px;right:
                                        110px;"> <img id="edit-off" src="./images/icon-edit.svg"
                                            style="margin-top: 7px;display: block;">
                                        <img id="edit-on" src="./images/icon-edit-on.svg"
                                            style="margin-top: 7px;display: none;">
                                    </a>
                                    <a class="copy_code" style="position:absolute;top: 5px;right: 75px;"
                                        data-clipboard-action="copy">
                                        <img src="./images/icon-view.svg" style="margin-top:7px;"> </a>
                                    <a class="blockpy-toolbar-download" style="position:absolute;top: 5px;right:
                                        39px;"> <img src="./images/icon-download.svg" style="margin-top: 7px;">
                                    </a>
                                    <a class="blockpy-toolbar-upload" style="position:absolute;top: 5px;right: 5px;">
                                        <img src="./images/icon-upload.svg" style="margin-top: 7px;"> </a>
                                    <img class="fullscreenIcon hidden" src="./images/icon-fullscreen.svg">
                                    <img class="fullscreenIcon hidden" src="./images/icon-fullscreen-exit.svg">

                                    <i id="repl_delete" class="material-icons sketch_name_icon right"
                                        style="margin-left: 20px;cursor: pointer;position: absolute;top: 12px;right: 12px;display:none;">delete</i>
                                </div>
                                <div class="card-content"
                                    style="position:relative;height: calc(100% - 45px);overflow:auto;" id="python_box">

                                    <div class="editDiv" id="editDiv" style="top: 0;width: 100%;left: 0;padding: 0;z-index: 0;
                                        right: 0;">
                                        <!-- <span class="translatable_editing">Enable Editing</span>
                                        <span style="display: none;" class="translatable_close_editing">Close
                                            Editing</span> -->
                                        <input type="checkbox" id="toggle-button" style="display: none;">
                                        <!--label中的for跟input的id绑定。作用是在点击label时选中input或者取消选中input-->
                                        <label for="toggle-button" class="button-label" style="display: none;">
                                            <span class="circle"></span>
                                            <span class="text on"></span>
                                            <span class="text off"></span>
                                        </label>

                                    </div>


                                    <div class="blockpy-toolbar" style="position: absolute;top: 0;width: 100%;">
                                        <div class='blockpy-text blockpy-editor-menu'>
                                            <div class='blockpy-text-sidebar'></div>
                                            <textarea readonly class='codemirror-div language-python'></textarea>
                                        </div>
                                        <div class="edit" id="edit"></div>
                                        <!-- <a class="copy_code" style="position:fixed;top:112px;right:25px;z-index:999;cursor:pointer;" data-clipboard-action="copy">                            <img src="./images/icon-copy.svg" width="24px">                        </a>                        <div class="blockpy-toolbar-download" style="position:fixed;top:113px;right:55px;z-index:999;cursor:pointer;">                            <img src="./images/icon-downward.svg" width="24px">                        </div>-->
                                    </div>
                                </div>
                                <div class="card-content hidden"
                                    style="position:relative;height: calc(100% - 60px);overflow:auto;padding:5px 10px;background-color: #fff; color: #000;"
                                    id="repl_box">
                                    <div class="editDiv" id="editDiv" style="width: 100%;left: -10px;padding: 0;">
                                        <span class="translatable_serial_plotter serial-active" id="switchSerial1"
                                            onclick="switchSerial('1')" style="display: none;">The
                                            data to print</span>
                                        <span class="translatable_serial_visualization" id="switchSerial2"
                                            onclick="switchSerial('2')" style="display: none;">Visual
                                            display</span>
                                    </div>
                                    <div class="blockpy-toolbar" id="repl_box_content"
                                        style="display:block;padding-top:35px;">
                                    </div>
                                    <div style="width: 100%;height: calc(100% - 50px);display: none;margin: 35px 0 10px 0;position: relative;"
                                        id="echartsShow">
                                        <div id="echartsMain" class="echartsMain"></div>
                                        <div id="echartsMains" style="display: none;">
                                            <span id="echartsMainSpan"></span>
                                        </div>
                                    </div>
                                </div>
                                <!-- <a class="copy_code" style="position:absolute;top:160px;right:70px;z-index:999;cursor:pointer;" data-clipboard-action="copy">                    <img src="./images/icon-copy.svg" width="24px">                </a>                <div class="blockpy-toolbar-download" style="position:absolute;top:160px;right:95px;z-index:999;cursor:pointer;">                    <img src="./images/icon-downward.svg" width="24px">                </div> -->
                            </div>
                            <div class='blockpy-content-left card-panel card'
                                style='display: block;background: #f8f8f8;min-height: 245px;position:relative;'>
                                <div class="card-header" style='height: 60px;line-height: 60px;background: #f1f2f5;'>
                                    <!-- http://help.cocorobo.cn/#/getting-started/info target="_blank"-->
                                    <div style='float:right;display: none;'>
                                        <a class="header-link upload_instruction" style="display: none;" href="#"
                                            data-tooltip-id="61c522fa-be27-2a3e-1f2d-cde212348740">
                                            <img src="./icons/instruction.png">
                                        </a>
                                        <a id="plugin_download" class="header-link" href="javaScript:(0)"
                                            data-tooltip-id="9e546554-688a-01c7-cde3-faaff99b557d"> <img
                                                src="./icons/plugin_download.png">
                                            <img style="position:absolute;height:10px;right:45px;bottom:32px; display:none; "
                                                src="./icons/icon_new.png">
                                        </a>
                                        <a href="#iframe" class="modal-trigger header-link" id="showIframe">
                                            <img src="./icons/firmware.png">
                                        </a>
                                        <!-- <a href="#updatePy" class="modal-trigger header-link">
                                            <img src="./icons/加载.png">
                                        </a> -->
                                        <label class="hidden"><input type="checkbox" class="filled-in" />
                                            <span class="translatable_Adapter_fill_connected filled-in_nocheked"
                                                style="color: #26a69a;font-size: 17px;font-weight: 600;">Adapter is
                                                disconnected</span>
                                        </label>
                                    </div>
                                    <!--<span class="header-icon"><img style="width: 30px;margin: 8px 8px 8px 20px;" src="./images/zhixing.png"> </span>-->
                                    <span class="header-text translate-code translatable_title_device"
                                        style='font-weight: 800;font-size: 20px;margin-left: 25px;'>Device</span>
                                    <div style="display: inline-block;margin-left: 20px;"><select
                                            class="select-connected " id="select-connected">
                                            <option class="select-connected translatable_select_connecteds"
                                                style="color: #000;">The
                                                cable to upload</option>
                                            <option style="color: #000;" class="translatable_no_select_connecteds">
                                                Wireless cable
                                                upload</option>
                                        </select></div>
                                    <div id="discnt_icon" style="display:inline-block;">
                                        <a href="#env_detect" class="modal-trigger"><img
                                                style="height:17px;margin-left:8px;transform:translateY(2px);"
                                                src="./icons/uploader_disconnect.png"></a>
                                    </div>
                                    <div id="cnt_icon" style="display:none;"><img
                                            style="height:17px;margin-left:8px;transform:translateY(2px);"
                                            src="./icons/uploader_connect.png"></div>

                                    <a id="send_string" onclick="sendstring('machine.reset()')" class="waves-effect
                                    waves-light blue  disabled" style="margin-right:0.5rem;background-color: #f1f2f5 !important;float: right;margin-top: 10px;">
                                            <!-- <span id="resetDevice">Reset Device</span> -->
                                        
                                        <img id="refresh-disabled" src="./images/icon-refresh-disabled.svg" style="margin-top: 7px;display: block;">
                                        <img id="refresh" src="./images/icon-refresh.svg" style="margin-top: 7px;display: none;">
                                        <img id="refresh-press" src="./images/icon-refresh-press.svg" style="margin-top: 7px;display: none;">
                                    </a>
                                </div>
                                <!--<div class="card-header">                    <span class="header-icon" style="line-height:40px;"><img style="height:30px;vertical-align:middle;" src="./images/icon-aspect.svg"></span>                    <span class="header-text translate-output">Output Area</span>                    <img class="fullscreenIcon" src="./images/icon-fullscreen.svg">                    <img class="fullscreenIcon hidden" src="./images/icon-fullscreen-exit.svg">                </div>-->
                                <!--<div class="card-content" style="display:block;grid-template-rows:1fr 50px;">                    <div style="border-bottom:1px solid #ddd;padding:8px;overflow:hidden;">                   <div style="height:100%;overflow:hidden;">                            <div class='blockpy-printer blockpy-printer-default' style="resize:none;height:98%;width:100%;border:1px solid #818181;">                            </div>                        </div>                   </div>-->
                                <div class="card-content" style="padding:8px 10px;width:100%">
                                    <div class="row" id="status">
                                        <div class="col s12"><img id="error-btn" class="activator"
                                                src="./icons/error.png">
                                            <span id="status_bar" class="translatable_statusbar">直接将代码上传到电子模块中。</span>
                                        </div>
                                    </div>
                                    <div class="row" id="progress">
                                        <div class="col s12">
                                            <div class="progress" style="margin:7px 0;">
                                                <div class="determinate green" style="width:0%;"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row btn-network">
                                        <div class="col s6" style="padding-right:1px;">
                                            <div class="select-wrapper initialized"><span class="caret">▼</span><input
                                                    type="text" class="select-dropdown" id="select_dropdown"
                                                    readonly="true"
                                                    data-activates="select-options-eca84f35-6884-7dc4-9d8b-c14115abe698"
                                                    value="检测不到连接端口">
                                                <ul id="select-options-eca84f35-6884-7dc4-9d8b-c14115abe698" class="dropdown-content
                                                        select-dropdown ">
                                                    <li class="disabled "><span>检测不到连接端口</span></li>
                                                </ul><select id="ports"
                                                    data-select-id="eca84f35-6884-7dc4-9d8b-c14115abe698"
                                                    class="initialized">
                                                    <option value="null" disabled="">检测不到连接端口</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col s6">
                                            <div style="float: right;margin-top: 15px;">
                                                <div style="display: inline-block;vertical-align: middle;">
                                                    <img id="runSuccess" src="/images/success.png" style="display: none;"/>
                                                    <img id="runFail" src="/images/fail.png" style="display: none;"/>
                                                </div>
                                                <div style="display: inline-block;">
                                                    <span id="statusMsg"></span>
                                                </div>
                                                
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row btn-network hidden">
                                        <div class="col cs6" style="padding-right:1px;width:100%">
                                            <div class="select-wrapper initialized" style='float: left;width: 45%;'>
                                                <input type="text" class="select-dropdown" data-activates=""
                                                    id='ipAddress' placeholder="请输入ip地址">
                                            </div>
                                            <div style='display:inline-block'><a onclick='button_click();' class="waves-effect waves-light
                                                        btn blue" style="margin-left: 0.5rem;margin-top: 4px;"><span
                                                        id="ConnectBtn">Connect
                                                        </spanbutton_click></a></div>
                                        </div>
                                    </div>
                                    <div class="row" style="position: absolute;bottom: 15px;width: 98%;margin: 0;">
                                        <div id="uploader-btns" class="col s12">
                                            <a onclick='sendfile();' id="send_file" class="waves-effect
                                                    waves-light btn blue disabled"
                                                style="margin-right:0.5rem;padding:0 0.5rem;">
                                                <i style="cursor: pointer;" class="fa fa-play-circle"
                                                    aria-hidden="true"></i>
                                                <span id="runCode"></span>
                                            </a>
                                            <a onclick="uploadpyfile()" id="uploadpy" class="waves-effect
                                            waves-light btn blue disabled" style="padding:0 0.5rem;">
                                                <i style="cursor: pointer;" class="fa fa-upload" aria-hidden="true"></i>
                                                <span id="uploadFiles"></span>
                                            </a>
                                            <div style="float: right;">
                                                <li style="display: none;">
                                                    <ul id="localsssssaveOrOpen" class="dropdown-content active">
                                                        <li style="padding: 14px 16px;" onclick="uploadfile(true)">
                                                            <a>开机启动可视化菜单界面</a></li>
                                                        <li style="padding: 14px 16px;" onclick="uploadfile(false)">
                                                            <a>开机运行上次的程序</a></li>
                                                    </ul>
                                                    <a id="qiehuanbtn"
                                                        class="qiehuanbtn btn dropdown-trigger blue lang_resize dropdown-button disabled"
                                                        data-activates="localsssssaveOrOpen"><span
                                                            id="runCuploadFilesode">更换启动模式</span><i
                                                            class="material-icons right"
                                                            style="margin-left: 0;">arrow_drop_down</i></a>
                                                </li>
                                                <!-- <a id="send_string" onclick="sendstring('machine.reset()')" class="waves-effect
                                                    waves-light btn blue  disabled" style="margin-right:0.5rem;"><span
                                                        id="resetDevice">Reset Device</span></a> -->
                                            </div>
                                        </div>
                                        <a onclick="getmcnty()" class="waves-effect waves-light btn blue"
                                            style="display:none"><span id="gettype">Upload
                                                files</span></a>
                                    </div>
                                </div>
                                <div class="blockpy-toolbar btn-toolbar hidden" style="align-self:center;margin: 20px 8px 0;text-align:
                                        center;">
                                    <div class="btn-toolbar-title">直接将代码上传到电子模块中<div></div>
                                    </div>
                                    <div class="btn-toolbar-inputbox"><input type="text" name="webrepl_url" id="url"
                                            placeholder="Select a device"><input type="submit" id='button'
                                            value='Connect' onclick='button_click(); return false'></div>
                                    <div class="btn-toolbar-btnbox"></div>
                                    <!--<button onclick='sendfile();' style='width: 80%;background: #6e83cc !important;margin-top: 15px;font-size: 16px;height:45px' class='waves-effect waves-light btn blue blockpy-run translate-execute'>上傳</button>-->
                                    <!--<button class='waves-effect waves-light btn blue blockpy-run translate-execute'>UPLOAD</button>-->
                                    <!-- <button href="#aiymodal" class='waves-effect waves-light btn blue modal-trigger'>run on aiy</button> -->
                                    <!--<button id="resetAll" class='waves-effect waves-light btn blue translate-reset' style="float:right;">reset</button>                        <button id="clearOutput" class='waves-effect waves-light btn blue translate-clear' style="float:right;margin-right:5px;">clear</button>-->
                                </div>
                                <div class="blockpy-toolbar btn-toolbar hidden" style="align-self:center;margin: 20px 8px 0;text-align:
                                        center;">
                                    <div class="btn-toolbar-title2">直接将代码上传到电子模块中 <div></div>
                                    </div>
                                    <div class="btn-toolbar-inputbox2"><select>
                                            <option>检测不到连接端口</option>
                                        </select></div>
                                </div>
                                <div class="card-reveal grey darken-3 white-text" style="padding:8px 13px;">
                                    <div class="card-title" style="height:18%;margin-bottom:2px;">
                                        <span class="translatable_errmsg" style="font-weight:normal;">Error
                                            Message</span>
                                        <a id="err-copy" style="display:inline-block;margin-left:26px;"
                                            data-clipboard-action="copy" data-clipboard-target="#err-msg">
                                            <i class="material-icons right"
                                                style="color:#fff;font-size:18px;cursor:pointer;">content_copy</i>
                                        </a>
                                        <i class="material-icons right" style="cursor:pointer;">close</i>
                                    </div>
                                    <div style="width:100%;height:78%;">
                                        <textarea readonly id="err-msg"
                                            style="color:#fff;overflow:visible;font-family:consolas;font-size:14px;height:100%;resize:none;border:none;"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="card plugin_options options_hide">
                                <div class="card-content">
                                    <div>
                                        <span id="downloadver" style="display:none">1.0.6</span>
                                        <a download=""
                                            href="//cocorobo.cn/downloads/CocoBlocklyXUploaderInstallerv1.0.10.pkg"
                                            target="_black"><img src="./icons/mac-icon.png">Mac </a>
                                        <a download=""
                                            href="//cocorobo.cn/downloads/CocoBlocklyXUploaderInstallerv1.0.11.exe"
                                            target="_black"><img src="./icons/windows-icon.png">Windows </a> </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class='modal blockpy-popup'>
                    <div class='modal-content' id='modal-message'>
                        <div class='modal-header'>
                            <h4 class='modal-title'>Dynamic Content</h4>
                        </div>
                        <hr style="border-top: 1px solid #ddd;margin:20px 0 10px 0;">
                        <div class='modal-body' style='width:100%;min-height:200px;'> </div>
                    </div>
                    <div class='modal-footer'> <button
                            class='waves-effect waves-light btn blue modal-close translate-close'>close</button>
                    </div>
                </div>
                <div id="aiymodal" class="modal">
                    <div class="modal-content" height="50%">
                        <h4>Run on AIY</h4>
                        <p>This feature gives you the ability to run your AIY python code directly to the AIY Vision Kit
                            or Voice Kit, follow the instruction below:</p>
                        <div style="margin-top:30px;"> <b
                                style="background-color:#fff; border-radius:25px;padding:
                                                        10px 20px; box-shadow: 1px 5px 23px -10px rgba(0,0,0,0.59);">Step 1</b> </div>
                        <div style="margin-top:30px;"> Run the <b data-position="bottom" data-tooltip="I am a
                                                        tooltip" class="tooltipped">AIY Helper</b>, <a id="AIYdownload"
                                style="cursor:pointer;">Download</a> the python code to local, <br />make sure you are
                            in the same network with the Google AIY Vision Kit. </div>
                        <div style="margin-top:30px;"> <b
                                style="background-color:#fff; border-radius:25px;padding:
                                                        10px 20px; box-shadow: 1px 5px 23px -10px rgba(0,0,0,0.59);">Step 2</b> </div>
                        <div class="input-field col s9" style="margin-top:0px;"> Enter the IP Address of your Google
                            AIY Kit: <div class="input-field inline"> <input id="aiyip_input" class="validate">
                            </div> <a id="aiyModalRun" onclick="functionSSH();" style="margin-left:10px;"
                                class="waves-effect blue waves-light btn">Run</a> <a id="aiyModalStop"
                                onclick="functionSSHstop();" style="margin-left:10px;" class="waves-effect blue
                                                        waves-light btn">Stop</a>
                            <!-- <a id="aiyModalRun"  style="margin-left:10px;" class="waves-effect blue waves-light btn">Run</a> -->
                            <!-- <a id="aiyModalStop"  style="margin-left:10px;" class="waves-effect blue waves-light btn">Stop</a> -->
                        </div>
                        <div id="modal_preload" style="display:none">
                            <div style="position:relative;top:50%;transform:translateY(-50%);height:128px;width:128px;margin:0
                                                        auto;">
                                <div class="preloader-wrapper big active" style="top:0;left:0">
                                    <div class="spinner-layer spinner-blue-only">
                                        <div class="circle-clipper left">
                                            <div class="circle"></div>
                                        </div>
                                        <div class="gap-patch">
                                            <div class="circle"></div>
                                        </div>
                                        <div class="circle-clipper right">
                                            <div class="circle" style="border-width: 8px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer" style="margin-top:-20px;"> <a href="#!" class="modal-close
                                                    waves-effect waves-green btn-flat">Close</a> </div>
                </div>
            </div>
            <!-- <ul id="icon-tool">
                <li class="card-icon active" onclick="">
                    <i class="material-icons media">build</i>
                </li>
                <li id="file-tool" class="card-icon">
                    <i class="material-icons media">folder</i>
                </li>
                <li id="lang-tool" class="card-icon">
                    <i class="material-icons media">translate</i>
                </li>
            </ul> -->
            <ul id="icon-tool" class="card-icon-area" style="display: none;">
                <li class="card-icon active hidden" onclick="changeSideCard('code')">
                    <i class="material-icons media">build</i>
                </li>
                <li class="card-icon hidden" onclick="changeSideCard('monitor')">
                    <i class="material-icons ">search</i>
                </li>
                <!-- <li class="card-icon" onclick="changeSideCard('fullmode')">
                    <i class="material-icons ">crop_free</i>
                </li> -->
                <li id="bar_python" class="card-icon">
                    <a href="/python" target="_blank">
                        <img class="bar-icon" src="./icons/python_icon.png" style="height: 30px;">
                    </a>
                </li>
                <li id="lang-tool" class="card-icon">
                    <i class="material-icons">translate</i>
                </li>
                <li id="apps_center" class="card-icon modal-trigger" href="#app_center_modal" style="display:none;">
                    <img class="bar-icon Img-filter" src="./icons/cocoblockly-navbar_labs-icon.png">
                </li>
                <li id="bar_storage" class="card-icon">
                    <img class="bar-icon" src="./icons/storage_icon-blockly-widget.png">
                </li>
                <!-- http://help.cocorobo.cn/  target="_blank"-->
                <li id="bar_help" class="card-icon">
                    <a href="//x-help.cocorobo.cn" target="_blank">
                        <img class="bar-icon" src="./icons/help_icon-blockly-widget.png">
                    </a>
                </li>
                <li id="bar_ai" class="card-icon" onclick="$('.MouduleBox')[1].style.display = 'block';">
                    <a href="#">
                        <img class="bar-icon" src="./icons/AIicon.png">
                    </a>
                </li>
                <li id="bar_t" class="card-icon modal-trigger" onclick="$('#ai_tt')[0].style.display = 'block';">
                    <a href="#">
                        <img class="bar-icon" src="./icons/l.png">
                    </a>
                </li>
            </ul>
            <a id='side-lang-trigger' class='dropdown-button' data-activates='side-lang'></a>
            <!-- <div id='side-lang-trigger'>
                <a class='dropdown-trigger' data-target='side-lang'></a>
            </div> -->
            <ul id="side-lang" class='dropdown-content'>
                <li onclick="changeLanguage('en')">
                    <a>English</a>
                </li>
                <li class="divider"></li>
                <li onclick="changeLanguage('zh-hant')">
                    <a>繁体中文</a>
                </li>
                <li class="divider"></li>
                <li onclick="changeLanguage('zh-hans')">
                    <a>简体中文</a>
                </li>
            </ul>
            <a id='side-storage-trigger' class='dropdown-button' data-activates='side-storage'></a>
            <ul id='side-storage' class='dropdown-content'>
                <li class='modal-trigger' href="#cloud_storage_modal" style="display:none;">
                    <span class="translatable_cloud_storage">Cloud</span>
                </li>
                <li class="divider"></li>
                <li class='modal-trigger' href="#Storage_import_modal">
                    <span class="translatable_localimport">Import</span>
                </li>
                <li class="divider"></li>
                <li class='modal-trigger' href="#Storage_export_modal">
                    <span class="translatable_localexport">Export</span>
                </li>
            </ul>
            <div id='side-file-trigger'>
                <a class='dropdown-trigger' data-target="side-file"></a>
            </div>
            <ul id='side-file' class='dropdown-content blockpy-toolbar'>
                <li id="side_button_load">
                    <span class="translate_import">Import</span>
                </li>
                <li class="divider"></li>
                <li id="side_button_save">
                    <span class="translate_export">Export</span>
                </li>
            </ul>
        </div>
        <!-- <footer id="footer">
            <div style="padding:0 1.5rem">
                <div><span class="translatable_copyright" style="color:#fff;">CocoRobo LTD © 2020 Copyright</span></div>
                <div><span>CocoBlockly X</span></div>
            </div>
        </footer> -->
        <!-- app center modal -->
        <div id="app_center_modal" class="modal modal_closes">
            <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;">close</i></span>
            <div id="TM_login"></div>
            <div class="modal-content" style="padding: 20px;">
                <span class="modal_close" style="padding: 15px;">
                    <i class="small material-icons" style="font-size: 1.5rem;">close</i>
                </span>
                <h4 class="translatable_labs_center_modal_title">CocoBlockly X Labs</h4>
                <hr style="border-top: 1px solid #ddd;margin:20px 0 10px 0;" />
                <div class="row" style="text-align:left;">
                    <div style="float:center;" class="col s3">
                        <p class="translatable_app_center_all_categories" style="padding-bottom:0px;font-weight: bold">
                            All
                            Categories:</p>
                        <div id="center_categories" class="collection ">
                            <a name="center_ai"
                                class="collection-item grey-text text-darken-4 active translatable_app_center_ai"
                                onclick="ACCategorySelect(1)">Artificial Intelligence</a>
                            <a name="center_iot"
                                class="collection-item grey-text text-darken-4 translatable_app_center_iot"
                                onclick="ACCategorySelect(2)">Internet of Things</a>
                            <a name="center_robot"
                                class="collection-item grey-text text-darken-4 translatable_app_center_robot"
                                onclick="ACCategorySelect(3)">Robot Controller</a>
                            <a name="center_science"
                                class="collection-item grey-text text-darken-4 translatable_app_center_science"
                                onclick="ACCategorySelect(4)">Science Experiements</a>
                            <a name="center_game"
                                class="collection-item grey-text text-darken-4 translatable_app_center_games"
                                onclick="ACCategorySelect(5)">Games</a>
                            <a name="center_arvr"
                                class="collection-item grey-text text-darken-4 translatable_app_center_arvr"
                                onclick="ACCategorySelect(6)">AR/VR</a>
                        </div>
                    </div>
                    <div style="float:center;padding-top:5px; overflow-y:auto;max-height:400px" class="col s9">
                        <div id="center_ai" class=" col s12">
                            <h5 class="translatable_app_center_ai">Artificial Intelligence</h5>
                            <ul class="tabs">
                                <li class="tab col s2"><a href="#center_ai_vision"
                                        class="translatable_app_center_tab_vision active">Vision</a></li>
                                <li class="tab col s2"><a href="#center_ai_speech"
                                        class="translatable_app_center_tab_speech">Speech</a></li>
                                <li class="tab col s2"><a href="#center_ai_text"
                                        class="translatable_app_center_tab_text">Text</a></li>
                            </ul>
                            <div id="center_ai_vision" class="col s12">
                                <div class="row">
                                    <div style="float:left;" class="col s6">
                                        <div class="card">
                                            <div class="card-image waves-effect waves-block waves-light">
                                                <img class="" src="icons/AppCenter_ai_teachableMachine.jpg"
                                                    style="border: solid 1.2px lightgray;">
                                            </div>
                                            <div class="card-content">
                                                <!-- <span class="AI_card_content">COCOCLOUD APP</span> -->
                                                <span id="ac-card-title"
                                                    class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_Teachabel_Machine">Teachable
                                                    Machine</span>
                                                <p class="">
                                                    <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
                                                        href="#setting_teacher">Enter</a>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="float:left;" class="col s6">
                                        <div class="card">
                                            <div class="card-image waves-effect waves-block waves-light">
                                                <!-- <img class="activator" src="icons/app-center_ai_emotion.jpg"> -->
                                                <img class="" src="icons/AppCenter_ai_emotion.jpg">
                                            </div>
                                            <div class="card-content">
                                                <!-- <span class="AI_card_content">COCOCLOUD APP</span> -->
                                                <span id="ac-card-title emotion_recognition_enter_button"
                                                    class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_emotion_recognition">Emotion
                                                    Recognition</span>
                                                <p class="">
                                                    <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
                                                        href="#setting_webcam_capture_modal">Enter</a>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div style="float:left;" class="col s6">
                                        <div class="card">
                                            <div class="card-image waves-effect waves-block waves-light">
                                                <!-- <img class="activator" src="icons/app-center_ai_emotion.jpg"> -->
                                                <img class="" src="icons/AppCenter_ai_gesture_recognition.jpg">
                                            </div>
                                            <div class="card-content">
                                                <!-- <span class="AI_card_content">COCOCLOUD APP</span> -->
                                                <span id="ac-card-title emotion_recognition_enter_button"
                                                    class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_gesture_recognition translatable_gesturesTitle">Gesture
                                                    Recognition</span>
                                                <p class="">
                                                    <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
                                                        href="#setting_gesture_recog_modal">Enter</a>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="float:left;" class="col s6">
                                        <div class="card">
                                            <div class="card-image waves-effect waves-block waves-light">
                                                <!-- <img class="activator" src="icons/app-center_ai_emotion.jpg"> -->
                                                <img class="" src="icons/object_recognition_header.jpg">
                                            </div>
                                            <div class="card-content">
                                                <!-- <span class="AI_card_content">COCOCLOUD APP</span> -->
                                                <span id="ac-card-title emotion_recognition_enter_button"
                                                    class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_object_recognition translatable_objectRecognition">Object
                                                    Recognition</span>
                                                <p class="">
                                                    <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
                                                        href="#setting_objectRecog">Enter</a>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="float:left;" class="col s6">
                                        <div class="card">
                                            <div class="card-image waves-effect waves-block waves-light">
                                                <!-- <img class="activator" src="icons/app-center_ai_emotion.jpg"> -->
                                                <img class="" src="icons/posenet_recogition.png">
                                            </div>
                                            <div class="card-content">
                                                <!-- <span class="AI_card_content">COCOCLOUD APP</span> -->
                                                <span id="ac-card-title emotion_recognition_enter_button"
                                                    class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_object_recognition translatable_posenetRecognition">Posenet
                                                    Recognition</span>
                                                <p class="">
                                                    <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
                                                        href="#setting_posenetRecog">Enter</a>
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                    <div style="float:left;" class="col s6">
                                        <div class="card">
                                            <div class="card-image waves-effect waves-block waves-light">
                                                <img class="" src="images/tm_with_pose.jpg"
                                                    style="border: solid 1.2px lightgray;">
                                            </div>
                                            <div class="card-content">
                                                <!-- <span class="AI_card_content">COCOCLOUD APP</span> -->
                                                <span id="ac-card-title"
                                                    class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_Teachabel_Machine_posenet">Teachable
                                                    Machine (with Pose Recognition)</span>
                                                <p class="">
                                                    <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
                                                        href="#setting_teacher_ponsenet">Enter</a>
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div id="center_ai_speech" class="col s12">
                                <div style="float:center;" class="col s6">
                                    <div class="card">
                                        <div class="card-image waves-effect waves-block waves-light">
                                            <img class="" src="icons/AppCenter_ai_speech.jpg">
                                        </div>
                                        <div class="card-content">
                                            <!-- <span class="AI_card_content">COCOCLOUD APP</span> -->
                                            <span id="ac-card-title"
                                                class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_speech_recognition">Speech
                                                Recognition</span>
                                            <p class="">
                                                <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
                                                    href="#voice_input_modal">Enter</a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="center_ai_text" class="col s12">
                                <div style="float:center;" class="col s6">
                                    <div class="card">
                                        <div class="card-image waves-effect waves-block waves-light">
                                            <img class="" src="./icons/AppCenter_comingSoon.jpg">
                                        </div>
                                        <div class="card-content">
                                            <span id="ac-card-title"
                                                class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_wait_to_come">Comming
                                                soon</span>
                                            <p class="">
                                                <!-- <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button disabled" href="#">Enter</a> -->
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="center_iot" class=" col s12" style="display:none">
                            <h5 class="translatable_app_center_iot">Internet of Things</h5>
                            <div style="float:center;" class="col s6">
                                <div class="card">
                                    <div class="card-image waves-effect waves-block waves-light">
                                        <img class="" src="icons/AppCenter_iot_thingspeak.jpg">
                                    </div>
                                    <div class="card-content">
                                        <!-- <span class="AI_card_content">3RD-PARTY APP</span> -->
                                        <span id="ac-card-title"
                                            class="ac-card-title card-title activator grey-text text-darken-4 ">ThingSpeak</span>
                                        <p class="">
                                            <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
                                                href="https://thingspeak.com" target="_blank">Enter</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div style="float:center;" class="col s6">
                                <div class="card">
                                    <div class="card-image waves-effect waves-block waves-light">
                                        <img class="" src="icons/AppCenter_iot_ifttt.jpg">
                                    </div>
                                    <div class="card-content">
                                        <!-- <span class="AI_card_content">3RD-PARTY APP</span> -->
                                        <span id="ac-card-title"
                                            class="ac-card-title card-title activator grey-text text-darken-4 ">IFTTT</span>
                                        <p class="">
                                            <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
                                                href="https://ifttt.com/maker_webhooks" target="_blank">Enter</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="center_robot" class=" col s12" style="display:none">
                            <h5 class="translatable_app_center_robot">Robot Controller</h5>
                            <div style="float:center;" class="col s6">
                                <div class="card">
                                    <div class="card-image waves-effect waves-block waves-light">
                                        <img class="" src="./icons/AppCenter_comingSoon.jpg">
                                    </div>
                                    <div class="card-content">
                                        <span id="ac-card-title"
                                            class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_wait_to_come">Comming
                                            soon</span>
                                        <p class="">
                                            <!-- <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button disabled" href="#">Enter</a> -->
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="center_science" class="col s12" style="display:none">
                            <h5 class="translatable_app_center_science">Science Experiements</h5>
                            <div style="float:center;" class="col s6">
                                <div class="card">
                                    <div class="card-image waves-effect waves-block waves-light">
                                        <img class="" src="./icons/AppCenter_comingSoon.jpg">
                                    </div>
                                    <div class="card-content">
                                        <span id="ac-card-title"
                                            class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_wait_to_come">Comming
                                            soon</span>
                                        <p class="">
                                            <!-- <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button disabled" href="#">Enter</a> -->
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="center_game" class=" col s12" style="display:none">
                            <h5 class="translatable_app_center_games">Interactive Games</h5>
                            <div style="float:center;" class="col s6">
                                <div class="card">
                                    <div class="card-image waves-effect waves-block waves-light">
                                        <img class="" src="./icons/AppCenter_game_floppy-bird.jpg">
                                    </div>
                                    <div class="card-content">
                                        <!-- <span class="AI_card_content">3RD-PARTY APP</span> -->
                                        <span id="ac-card-title"
                                            class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_game_flappy">Floppy
                                            bird</span>
                                        <p class="">
                                            <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button "
                                                href="https://cocorobo.cn/demo/floppybird/" target="_blank">Enter</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div style="float:center;" class="col s6">
                                <div class="card">
                                    <div class="card-image waves-effect waves-block waves-light">
                                        <img class="" src="icons/AppCenter_game_space_lamb.jpg">
                                    </div>
                                    <div class="card-content">
                                        <!-- <span class="AI_card_content">3RD-PARTY APP</span> -->
                                        <span id="ac-card-title"
                                            class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_game_space_lamb">Space
                                            Lamb</span>
                                        <p class="">
                                            <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button "
                                                href="https://spacelamb.12wave.com" target="_blank">Enter</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="center_arvr" class=" col s12" style="display:none">
                            <h5 class="translatable_app_center_arvr">AR/VR</h5>
                            <div style="float:center;" class="col s6">
                                <div class="card">
                                    <div class="card-image waves-effect waves-block waves-light">
                                        <!-- <img class="activator" src="icons/app-center_ai_speech.jpg"> -->
                                        <img class="" src="icons/AppCenter_comingSoon.jpg">
                                    </div>
                                    <div class="card-content">
                                        <span id="ac-card-title"
                                            class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_wait_to_come">Comming
                                            soon</span>
                                        <p class="">
                                            <!-- <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button disabled" href="#">Enter</a> -->
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 显示Teachable Machine modal配置弹框 -->
        <div id="setting_teacher" class="modal modal_closes">
            <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;">close</i></span>
            <div class="modal-content" style="padding: 20px;">
                <span class="modal_close" style="padding: 15px;">
                    <i class="small material-icons" style="font-size: 1.5rem;">close</i>
                </span>
                <h4 class="translatable_labs_center_modal_title">CocoBlockly Labs</h4>
                <hr style="border-top: 1px solid #ddd;margin:20px 0 10px 0;" />
                <div style="display:flex;justify-content:space-around;">
                    <div class="modal_setting_teacher_left setting_left_all">
                        <div class="card-image waves-effect waves-block waves-light">
                            <img class="" src="icons/AppCenter_ai_teachableMachine.jpg"
                                style="border: solid 1.2px lightgray;width: 100%;">
                        </div>
                        <div>
                            <span id="ac-card-title"
                                class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_Teachabel_Machine"
                                style="font-size: 30px;">Teachable
                                Machine</span>
                            <p class="translatable_Teachabel_Machin_content">The trend of robot development is
                                artificial
                                intelligence. Deep learning is the frontier technology of intelligent robot and a new
                                topic
                                in the field of machine learning.Deep learning technology is widely used in agriculture,
                                industry, military, aviation and other fields, and the organic combination with machines
                                can
                                design intelligent robots with high working efficiency, high real-time and high
                                accuracy.
                            </p>
                        </div>
                    </div>
                    <div class="modal_setting_teacher_right setting_right_all">
                        <div class="translatable_computer_configuration"
                            style="background: rgb(33, 150, 243);padding: 5px 10px;color: #fff;border-top-left-radius: 5px;border-top-right-radius: 5px;">
                            <span>Computer Configuration Requirements</span>
                        </div>
                        <div class="setting_border">
                            <p><span class="translatable_the_operating_system">Minimum Opearting System
                                    version</span>：Windows (>Windows7), macOS (>10.11)</p>
                            <p><span class="translatable_resolution_of_the">Suggested Resolution
                                    Supported</span>：1440*768
                            </p>
                            <p><span class="translatable_memory_capacity">Memory Capacity</span>：8GB-16GB</p>
                            <p><span class="translatable_the_hard_disk">The Hard Disk</span>：256GB-512Gb</p>
                            <p><span class="translatable_the_graphics_card">The Graphics Card</span>：650M</p>
                            <p><span class="translatable_is_need_camera">Do you need a camera</span>：<span
                                    class="translatable_need">OK</span></p>
                            <p><span class="translatable_is_need_microphone">Do you need a microphone</span>：<span
                                    class="translatable_no_need">NO</span></p>
                        </div>
                        <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
                            href="#Teachable_Machine" style="width: 94%;position: absolute;bottom: 5px;">Enter</a>
                    </div>
                </div>
            </div>
        </div>
        <!--Teachable Machine modal-->
        <div id="Teachable_Machine" class="modal TM_class modal_closes">
            <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;">close</i></span>
            <div id="TM_login" style="margin-top:10px;top:10%;position:relative"></div>
            <div id="TM_iframe" style="height:100%; width:100%; display:none"></div>
            <div id="teachable_modal" class="object_modal">
                <img src="./gif/loading.gif"
                    style="position: absolute;top: calc(50% - 140px);width: 500px;left: calc(50% - 250px);" />
            </div>
        </div>

        <!-- 显示Teachable Machine modal配置弹框 -->
        <div id="setting_teacher_ponsenet" class="modal modal_closes">
            <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;">close</i></span>
            <div class="modal-content" style="padding: 20px;">
                <h4 class="translatable_labs_center_modal_title">CocoBlockly Labs</h4>
                <hr style="border-top: 1px solid #ddd;margin:20px 0 10px 0;" />
                <div style="display:flex;justify-content:space-around;">
                    <div class="modal_setting_teacher_left setting_left_all">
                        <div class="card-image waves-effect waves-block waves-light">
                            <img class="" src="images/tm_with_pose.jpg"
                                style="border: solid 1.2px lightgray;width: 100%;">
                        </div>
                        <div>
                            <span id="ac-card-title"
                                class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_Teachabel_Machine_posenet"
                                style="font-size: 30px;">Teachable
                                Machine</span>
                            <p class="translatable_Teachabel_Machin_content">The trend of robot development is
                                artificial
                                intelligence. Deep learning is the frontier technology of intelligent robot and a new
                                topic
                                in the field of machine learning.Deep learning technology is widely used in agriculture,
                                industry, military, aviation and other fields, and the organic combination with machines
                                can
                                design intelligent robots with high working efficiency, high real-time and high
                                accuracy.
                            </p>
                        </div>
                    </div>
                    <div class="modal_setting_teacher_right setting_right_all">
                        <div class="translatable_computer_configuration"
                            style="background: rgb(33, 150, 243);padding: 5px 10px;color: #fff;border-top-left-radius: 5px;border-top-right-radius: 5px;">
                            <span>Computer Configuration Requirements</span>
                        </div>
                        <div class="setting_border">
                            <p><span class="translatable_the_operating_system">Minimum Opearting System
                                    version</span>：Windows (>Windows7), macOS (>10.11)</p>
                            <p><span class="translatable_resolution_of_the">Suggested Resolution
                                    Supported</span>：1440*768
                            </p>

                            <p><span class="translatable_memory_capacity">Memory Capacity</span>：8GB-16GB</p>

                            <p><span class="translatable_the_hard_disk">The Hard Disk</span>：256GB-512Gb</p>
                            <p><span class="translatable_the_graphics_card">The Graphics Card</span>：650M</p>

                            <p><span class="translatable_is_need_camera">Do you need a camera</span>：<span
                                    class="translatable_need">OK</span></p>
                            <p><span class="translatable_is_need_microphone">Do you need a microphone</span>：<span
                                    class="translatable_no_need">NO</span></p>
                        </div>
                        <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
                            href="#Teachable_Machine_ponsenet"
                            style="width: 94%;position: absolute;bottom: 5px;">Enter</a>
                    </div>
                </div>
            </div>
        </div>
        <!--Teachable Machine modal-->
        <div id="Teachable_Machine_ponsenet" class="modal TM_class modal_closes" style="position:relative">
            <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;">close</i></span>
            <div id="TM_posenet_login" style="margin-top:10px;top:10%;position:relative"></div>
            <div id="TM_posenet_iframe" style="height:100%; width:100%;"></div>
            <div id="teachable_posenet_modal" class="object_modal">
                <img src="./gif/loading.gif"
                    style="position: absolute;top: calc(50% - 140px);width: 500px;left: calc(50% - 250px);" />
            </div>
        </div>

        <!-- 显示Object Recog_modal modal配置弹框-->
        <div id="setting_objectRecog" class="modal modal_closes">
            <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;">close</i></span>
            <div class="modal-content" style="padding: 20px;">
                <span class="modal_close" style="padding: 15px;">
                    <i class="small material-icons" style="font-size: 1.5rem;">close</i>
                </span>
                <h4 class="translatable_labs_center_modal_title">CocoBlockly Labs</h4>
                <hr style="border-top: 1px solid #ddd;margin:20px 0 10px 0;" />
                <div style="display: flex;justify-content:space-around;">
                    <div class="modal_setting_objectRecog_left setting_left_all">
                        <div class="card-image waves-effect waves-block waves-light">
                            <img class="" src="icons/object_recognition_header.jpg"
                                style="border: solid 1.2px lightgray;width: 100%;">
                        </div>
                        <div>
                            <span id="ac-card-title emotion_recognition_enter_button" class="ac-card-title card-title activator grey-text text-darken-4
                        translatable_app_center_object_recognition translatable_objectRecognition"
                                style="font-size: 30px;">Object
                                Recognition</span>
                            <p class="translatable_objectRecognition_content">The development trend of object
                                recognition is
                                artificial intelligence. Object recognition is the frontier technology of intelligent
                                recognition and a new subject in the field of recognition.Object recognition technology
                                is
                                widely used in agriculture, industry, military, aviation and other fields.
                            </p>
                        </div>
                    </div>
                    <div class="modal_setting_objectRecog_right setting_right_all" style="width: 48%;">
                        <div class="translatable_computer_configuration"
                            style="background: rgb(33, 150, 243);padding: 5px 10px;color: #fff;border-top-left-radius: 5px;border-top-right-radius: 5px;">
                            <span>Computer Configuration Requirements</span>
                        </div>
                        <div class="setting_border">
                            <p><span class="translatable_the_operating_system">Minimum Opearting System
                                    version</span>：Windows (>Windows7), macOS (>10.11)</p>
                            <p><span class="translatable_resolution_of_the">Suggested Resolution
                                    Supported</span>：1440*768
                            </p>
                            <p><span class="translatable_memory_capacity">Memory Capacity</span>：8GB-16GB</p>
                            <p><span class="translatable_the_hard_disk">The Hard Disk</span>：256GB-512Gb</p>
                            <p><span class="translatable_the_graphics_card">The Graphics Card</span>：650M</p>
                            <p><span class="translatable_is_need_camera">Do you need a camera</span>：<span
                                    class="translatable_need">OK</span></p>
                            <p><span class="translatable_is_need_microphone">Do you need a microphone</span>：<span
                                    class="translatable_no_need">NO</span></p>
                        </div>
                        <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
                            href="#Object_recog_modal" style="width: 94%;position: absolute;bottom: 5px;">Enter</a>
                    </div>
                </div>
            </div>
        </div>
        <!--Object Recog_modal modal-->
        <div id="Object_recog_modal" class="modal TM_class modal_closes" style="position:relative">
            <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;">close</i></span>
            <div id="TM_login_object" style="margin-top:10px;top:10%;position:relative"></div>
            <div id="TM_iframe_object" style="height:100%; width:100%; display:none"></div>
            <div id="object_modal" class="object_modal">
                <img src="./gif/loading.gif"
                    style="position: absolute;top: calc(50% - 140px);width: 500px;left: calc(50% - 250px);" />
            </div>
        </div>
        <!-- 显示posenet Recog_modal modal配置弹框 -->
        <div id="setting_posenetRecog" class="modal modal_closes">
            <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;">close</i></span>
            <div class="modal-content" style="padding: 20px;">
                <span class="modal_close" style="padding: 15px;">
                    <i class="small material-icons" style="font-size: 1.5rem;">close</i>
                </span>
                <h4 class="translatable_labs_center_modal_title">CocoBlockly Labs</h4>
                <hr style="border-top: 1px solid #ddd;margin:20px 0 10px 0;" />
                <div style="display: flex;justify-content:space-around;">
                    <div class="modal_setting_objectRecog_left setting_left_all">
                        <div class="card-image waves-effect waves-block waves-light">
                            <img class="" src="icons/posenet_recogition.png"
                                style="border: solid 1.2px lightgray;width: 100%;">
                        </div>
                        <div>
                            <span id="ac-card-title emotion_recognition_enter_button" class="ac-card-title card-title activator grey-text text-darken-4
                        translatable_app_center_object_recognition translatable_posenetRecognition"
                                style="font-size: 30px;">Posenet
                                Recognition</span>
                            <p class="translatable_posenetRecognition_content">The development trend of object
                                recognition
                                is
                                artificial intelligence. Object recognition is the frontier technology of intelligent
                                recognition and a new subject in the field of recognition.Object recognition technology
                                is
                                widely used in agriculture, industry, military, aviation and other fields.
                            </p>
                        </div>
                    </div>
                    <div class="modal_setting_objectRecog_right setting_right_all" style="width: 48%;">
                        <div class="translatable_computer_configuration"
                            style="background: rgb(33, 150, 243);padding: 5px 10px;color: #fff;border-top-left-radius: 5px;border-top-right-radius: 5px;">
                            <span>Computer Configuration Requirements</span>
                        </div>
                        <div class="setting_border">
                            <p><span class="translatable_the_operating_system">Minimum Opearting System
                                    version</span>：Windows (>Windows7), macOS (>10.11)</p>
                            <p><span class="translatable_resolution_of_the">Suggested Resolution
                                    Supported</span>：1440*768
                            </p>
                            <p><span class="translatable_memory_capacity">Memory Capacity</span>：8GB-16GB</p>
                            <p><span class="translatable_the_hard_disk">The Hard Disk</span>：256GB-512Gb</p>
                            <p><span class="translatable_the_graphics_card">The Graphics Card</span>：650M</p>
                            <p><span class="translatable_is_need_camera">Do you need a camera</span>：<span
                                    class="translatable_need">OK</span></p>
                            <p><span class="translatable_is_need_microphone">Do you need a microphone</span>：<span
                                    class="translatable_no_need">NO</span></p>
                        </div>
                        <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
                            href="#Posent_recog_modal" style="width: 94%;position: absolute;bottom: 5px;">Enter</a>
                    </div>
                </div>
            </div>
        </div>
        <!--Object Recog_modal modal-->
        <div id="Posent_recog_modal" class="modal TM_class modal_closes" style="position:relative">
            <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;">close</i></span>
            <div id="TM_login_posenet" style="margin-top:10px;top:10%;position:relative"></div>
            <div id="TM_iframe_posenet" style="height:100%; width:100%; display:none"></div>
            <div id="posenet_modal" class="object_modal">
                <img src="./gif/loading.gif"
                    style="position: absolute;top: calc(50% - 140px);width: 500px;left: calc(50% - 250px);" />
            </div>
        </div>
        <!-- 显示webcam input modal配置弹框 -->
        <div id="setting_webcam_capture_modal" class="modal modal_closes">
            <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;">close</i></span>
            <div class="modal-content" style="padding: 20px;">
                <span class="modal_close" style="padding: 15px;">
                    <i class="small material-icons" style="font-size: 1.5rem;">close</i>
                </span>
                <h4 class="translatable_labs_center_modal_title">CocoBlockly Labs</h4>
                <hr style="border-top: 1px solid #ddd;margin:20px 0 10px 0;" />
                <div style="display:flex;justify-content:space-around;">
                    <div class="modal_setting_teacher_left setting_left_all">
                        <div class="card-image waves-effect waves-block waves-light">
                            <img class="" src="icons/AppCenter_ai_emotion.jpg"
                                style="border: solid 1.2px lightgray;width: 100%;">
                        </div>
                        <div>
                            <span id="ac-card-title emotion_recognition_enter_button"
                                class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_emotion_recognition"
                                style="font-size: 30px;">Emotion
                                Recognition</span>
                            <p class="translatable_webcam_capture_content">The trend of robot development is artificial
                                intelligence. Deep learning is the frontier technology of intelligent robot and a new
                                topic
                                in the field of machine learning.Deep learning technology is widely used in agriculture,
                                industry, military, aviation and other fields, and the organic combination with machines
                                can
                                design intelligent robots with high working efficiency, high real-time and high
                                accuracy.
                            </p>
                        </div>
                    </div>
                    <div class="modal_setting_teacher_right setting_right_all">
                        <div class="translatable_computer_configuration"
                            style="background: rgb(33, 150, 243);padding: 5px 10px;color: #fff;border-top-left-radius: 5px;border-top-right-radius: 5px;">
                            <span>Computer Configuration Requirements</span>
                        </div>
                        <div class="setting_border">
                            <p><span class="translatable_the_operating_system">Minimum Opearting System
                                    version</span>：Windows (>Windows7), macOS (>10.11)</p>
                            <p><span class="translatable_resolution_of_the">Suggested Resolution
                                    Supported</span>：1440*768
                            </p>
                            <p><span class="translatable_memory_capacity">Memory Capacity</span>：8GB-16GB</p>
                            <p><span class="translatable_the_hard_disk">The Hard Disk</span>：256GB-512Gb</p>
                            <p><span class="translatable_the_graphics_card">The Graphics Card</span>：650M</p>
                            <p><span class="translatable_is_need_camera">Do you need a camera</span>：<span
                                    class="translatable_need">Ok</span></p>
                            <p><span class="translatable_is_need_microphone">Do you need a microphone</span>：<span
                                    class="translatable_no_need">NO</span></p>
                        </div>
                        <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
                            href="#webcam_capture_modal" style="width: 94%;position: absolute;bottom: 5px;">Enter</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- webcam input modal -->
        <div id="webcam_capture_modal" class="modal">
            <div id="emotionRecognitionTitle" class="modal-content">
                <div style="margin-bottom:-10px;margin-top:10px;" class="row">
                    <div class="col s8">
                        <h4 class="translatable_webcamDemoTitle">Emotion Recognition</h4>
                    </div>
                    <div style="text-align:right;" class="col s4">
                        <a style="cursor: pointer;text-decoration:none; color:rgba(0,0,0.9);"
                            id="emotion_recognition_close" class="modal-action modal-close">
                            <h4><i class="small material-icons">close</i></h4>
                        </a>
                    </div>
                </div>
                <!--<div> <span class="translatable_cloudFileTooltip" sytle="margin-left:10px">Type project's name and click save</span></div>-->
                <div class="row">
                    <div class="col s12">
                        <div class="switch" style="margin-bottom:20px;">
                            <label>
                                <span class="translatable_emotion_camera_off">Camera Off</span>
                                <input id="camera_switch" type="checkbox" onclick="cameraSwitch()">
                                <span class="lever "></span><span class="translatable_emotion_camera_on">On</span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="row" style="text-align:left;">
                    <div style="float:center;" class="col s6">
                        <p class="translatable_face_webcam" style="margin-top:-20px;">Webcam:</p>
                        <div id="webCamera"></div>
                        <div class="translatable_emotion_camera_turnon_text" id="webCamPlaceholder">Turn on the Camera
                            first
                        </div>
                    </div>
                    <div style="float:center;" class="col s6">
                        <p class="translatable_face_latest_snapshot" style="margin-top:-20px;">Last snapshot:</p>
                        <div id="emotionResults"></div>
                        <div class="translatable_emotion_snapshot_text" id="SnapshotPlaceholder">Your snapshot will be
                            here
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col s12">
                        <a id="emotionRequestStatus"
                            class="disabled waves-effect waves-light btn blue translatable_face_analyze"
                            onclick="processImage()">Analyze</a>
                        <span id="azureRequestStatusText" style="padding-left:20px;"> </span>
                    </div>
                </div>
                <div class="row" style="text-align:left;">
                    <div id="emotionResultsAll" class="col s12">
                        <span class="translatable_emotion_result_title" id="facialanalysistitle"
                            style="font-weight:200;">Facial Analysis:</span>
                        <div style="display: flex;flex-wrap: wrap;margin-top: 10px;">
                            <p id="emotionResultsAll_property" style="width: 50%;">
                                <b class="translatable_emotion_result_age_title">Age:</b>
                                <span id="emotionResults_age"
                                    class="emotionResultsAll_single translatable_emotion_result_default">Nothing
                                    detected.</span>
                            </p>
                            <p id="emotionResultsAll_property" style="width: 50%;">
                                <b class="translatable_emotion_result_emotion_title">Emotion:</b>
                                <span id="emotionResults_emotion"
                                    class="emotionResultsAll_single translatable_emotion_result_default">Nothing
                                    detected.</span>
                            </p>
                            <p id="emotionResultsAll_property" style="width: 50%;">
                                <b class="translatable_emotion_result_gender_title">Gender:</b>
                                <span id="emotionResults_gender"
                                    class="emotionResultsAll_single translatable_emotion_result_default">Nothing
                                    detected.</span>
                            </p>
                            <p id="emotionResultsAll_property" style="width: 50%;">
                                <b class="translatable_emotion_result_glasses_title">Glasses:</b>
                                <span id="emotionResults_glasses"
                                    class="emotionResultsAll_single translatable_emotion_result_default">Nothing
                                    detected.</span>
                            </p>
                            <!-- <p id="emotionResultsAll_property" style="width: 50%;">
                                <b class="translatable_emotion_result_appearance_title">Appearance:</b>
                                <span id="emotionResults_appearance"
                                    class="emotionResultsAll_single translatable_emotion_result_default">Nothing
                                    detected.</span>
                            </p> -->
                            <p id="emotionResultsAll_property" style="width: 50%;">
                                <b class="translatable_emotion_result_expression_title">Expression:</b>
                                <span id="emotionResults_expression" class="emotionResultsAll_single">Nothing
                                    detected.</span>
                            </p>
                            <p id="emotionResultsAll_property"
                                style="width: 100%;border-top: 1px solid #ccc;margin-top: 10px;padding-top: 10px;">
                                <b class="translatable_emotion_result_expression_title">Emotion:</b>
                                <span class="emotionResultsAll_single">smile、laugh、none</span>
                            </p>
                            <p id="emotionResultsAll_property" style="width: 100%;">
                                <b class="translatable_emotion_result_emotion_title">Expression:</b>
                                <span
                                    class="emotionResultsAll_single">angry、disgust、fear、happy、sad、surprise、neutral、pouty、grimace</span>
                            </p>
                        </div>
                    </div>
                    <div class="col s12 select_send_way" style="position: relative; margin:12px 0;padding: 0;">
                        <span class="select_send_way_color translatable_send_cloud">Send Cloud</span>
                        <!-- <span class="translatable_send_module">Send Module</span> -->
                    </div>
                </div>
                <div class="row">
                    <div class="col s12 send_cloud" style="position: relative">
                        <div id="cloudRequestStatus" class="col s12">
                        </div>
                        <div class="translatable_selectEvent">Choose a CocoCloud event here, the analyzed result will
                            directly send to there</div>
                        <div style="width:100%;margin-top: 15px;">
                            <select class="browser-default" id="AI_webcam_events">
                                <option class="translatable_noEvent" value=null disabled>No event here. Login first
                                </option>
                            </select>
                        </div>
                        <span style="float:right;top: -45px;position: relative;margin-top: -38px;">
                            <i id="update_Coevent_web" class="material-icons">autorenew</i>
                        </span>
                    </div>
                    <div class="col s12 send_module" style="position: relative;display: none;height: 100px;">
                        <div class="translatable_send_module">Send Module</div>
                        <div class="col s6" style="margin-top:2px;padding: 0;">
                            <span class="translatable_send_result">Send Result:</span>
                            <select class="browser-default" id="select_send_capture"
                                style="width: 120px;display: inline-block;height: 35px;">
                                <option value="emotionResults_age" class="translatable_emotion_result_age_title">Age
                                </option>
                                <option value="emotionResults_emotion"
                                    class="translatable_emotion_result_emotion_title">
                                    Emotion</option>
                                <option value="emotionResults_gender" class="translatable_emotion_result_gender_title">
                                    Sex
                                </option>
                                <option value="emotionResults_glasses"
                                    class="translatable_emotion_result_glasses_title">
                                    Glasses</option>
                                <option value="emotionResults_expression"
                                    class="translatable_emotion_result_expression_title">Expression</option>
                            </select>
                            <span class="translatable_port">Port:</span>
                            <span class="port" style="padding-left:10px;"></span>
                        </div>
                        <div class="col s6" style="margin-top:2px;">
                            <a class="waves-effect waves-light blue lighten-2 btn translatable_connectBtn translatable_connectBtns disabled"
                                style="float:right;margin-right:5px">connect</a>
                            <a class="waves-effect waves-light blue lighten-2 btn translatable_disconnectBtn translatable_disconnectBtns "
                                style="float:right;margin-right:5px;display:none">disconnect</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 显示gesture recognition modal配置弹框 -->
        <div id="setting_gesture_recog_modal" class="modal modal_closes">
            <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;">close</i></span>
            <div class="modal-content" style="padding: 20px;">
                <span class="modal_close" style="padding: 15px;">
                    <i class="small material-icons" style="font-size: 1.5rem;">close</i>
                </span>
                <h4 class="translatable_labs_center_modal_title">CocoBlockly Labs</h4>
                <hr style="border-top: 1px solid #ddd;margin:20px 0 10px 0;" />
                <div style="display:flex;justify-content:space-around;">
                    <div class="modal_setting_teacher_left setting_left_all">
                        <div class="card-image waves-effect waves-block waves-light">
                            <img class="" src="icons/AppCenter_ai_gesture_recognition.jpg"
                                style="border: solid 1.2px lightgray;width: 100%;">
                        </div>
                        <div>
                            <span id="ac-card-title emotion_recognition_enter_button"
                                class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_gesture_recognition translatable_gesturesTitle"
                                style="font-size: 30px;">Gesture
                                Recognition</span>
                            <p class="translatable_gesture_recog_content">The trend of robot development is artificial
                                intelligence. Deep learning is the frontier technology of intelligent robot and a new
                                topic
                                in the field of machine learning.Deep learning technology is widely used in agriculture,
                                industry, military, aviation and other fields, and the organic combination with machines
                                can
                                design intelligent robots with high working efficiency, high real-time and high
                                accuracy.
                            </p>
                        </div>
                    </div>
                    <div class="modal_setting_teacher_right setting_right_all">
                        <div class="translatable_computer_configuration"
                            style="background: rgb(33, 150, 243);padding: 5px 10px;color: #fff;border-top-left-radius: 5px;border-top-right-radius: 5px;">
                            <span>Computer Configuration Requirements</span>
                        </div>
                        <div class="setting_border">
                            <p><span class="translatable_the_operating_system">Minimum Opearting System
                                    version</span>：Windows (>Windows7), macOS (>10.11)</p>
                            <p><span class="translatable_resolution_of_the">Suggested Resolution
                                    Supported</span>：1440*768
                            </p>
                            <p><span class="translatable_memory_capacity">Memory Capacity</span>：8GB-16GB</p>
                            <p><span class="translatable_the_hard_disk">The Hard Disk</span>：256GB-512Gb</p>
                            <p><span class="translatable_the_graphics_card">The Graphics Card</span>：650M</p>
                            <p><span class="translatable_is_need_camera">Do you need a camera</span>：<span
                                    class="translatable_need">Ok</span></p>
                            <p><span class="translatable_is_need_microphone">Do you need a microphone</span>：<span
                                    class="translatable_no_need">NO</span></p>
                        </div>
                        <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
                            href="#gesture_recog_modal" style="width: 94%;position: absolute;bottom: 5px;">Enter</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- gesture recognition modal -->
        <div id="gesture_recog_modal" class="modal">
            <div id="gestureRecognitionTitle" class="modal-content">
                <div style="margin-bottom:-10px;margin-top:10px;" class="row">
                    <div class="col s10">
                        <h4 class="translatable_gesturesTitle">Gesture Recognition</h4>
                    </div>
                    <div style="text-align:right;" class="col s2">
                        <a style="cursor: pointer;text-decoration:none; color:rgba(0,0,0.9);"
                            id="gesture_recognition_close" class="modal-action modal-close">
                            <h4><i class="small material-icons">close</i></h4>
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col s12">
                        <div class="switch" style="margin-bottom:20px;">
                            <label>
                                <span class="translatable_emotion_camera_off">Camera Off</span>
                                <input id="camera_switch_gesture" type="checkbox" onclick="cameraSwitchGesture();">
                                <span class="lever "></span><span class="translatable_emotion_camera_on">On</span>
                            </label>
                        </div>
                    </div>
                </div>
                <div style="margin-bottom:10px;" class="row">
                    <div style="float:center;" class="col s5">
                        <p class="translatable_gesture_webcam" style="margin-top:-20px;">Webcam:</p>
                        <div id="webCameraGestureFrame">
                            <div id="webCameraGesture"></div>
                        </div>
                        <div class="translatable_emotion_camera_turnon_text" id="gesture_webCamPlaceholder">Turn on the
                            Camera first
                        </div>
                    </div>
                    <div style="float:center;" class="col s7">
                        <a id="gestureAnalyzeButton"
                            class="disabled waves-effect waves-light btn blue translatable_gesture_recognition"
                            onclick="gestureRecognize();">Recognize</a>
                        <div id="gestureResultAreaFrame">
                            <h4 class="gestureResultAreaTitle translatable_gesture_recognition_result">Recognition
                                Result:
                            </h4>
                            <div id="gestureResultAreaContent" class="translatable_gesture_result">
                                No result yet.
                            </div>
                        </div>
                        <div class="col s12 select_send_way" style="position: relative; margin:12px 0;padding: 0;">
                            <span class="select_send_way_color translatable_send_cloud">Send Cloud</span>
                            <!-- <span class="translatable_send_module">Send Module</span> -->
                        </div>
                        <div class="s12" style="position: relative;margin-top: 45px;">
                            <div class="send_cloud">
                                <div id="cloudRequestStatuss" class="s12">
                                </div>
                                <div class="translatable_selectEvent" style="padding-right: 0.75rem;">Choose a CocoCloud
                                    event
                                    here, the analyzed result will
                                    directly send to there</div>
                                <div style="width:100%;margin-top: 15px;">
                                    <select class="browser-default" id="AI_gesture_events">
                                        <option class="translatable_noEvent" value=null disabled>No event here. Login
                                            first
                                        </option>
                                    </select>
                                </div>
                                <span style="float:right;top: -45px;position: relative;margin-top: -38px;">
                                    <i id="update_Coevent_web" class="material-icons">autorenew</i>
                                </span>
                            </div>
                            <div class="col s12 send_module"
                                style="position: relative;display: none;height: 100px;padding: 0;">
                                <div class="translatable_send_module">Send Module</div>
                                <div class="input-field col s6" style="margin-top:2px;padding: 0;">
                                    <span class="translatable_port">Port:</span>
                                    <span class="port" style="padding-left:10px;"></span>
                                </div>
                                <div class="col s6" style="margin-top:2px;">
                                    <a class="waves-effect waves-light blue lighten-2 btn translatable_connectBtns translatable_connectBtn disabled"
                                        style="float:right;margin-right:5px">connect</a>
                                    <a class="waves-effect waves-light blue lighten-2 btn translatable_disconnectBtns translatable_disconnectBtn"
                                        style="float:right;margin-right:5px;display:none">disconnect</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="row">
                    <div class="col s12">
                        <hr style="margin-top: 20px; border-top: 0.5px solid rgba(0,0,0,.1);" />
                    </div>
                </div> -->
            </div>
        </div>
        <!-- 显示voice speech modal配置弹框 -->
        <div id="setting_voice_input_modal" class="modal modal_closes">
            <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;">close</i></span>
            <div class="modal-content" style="padding: 20px;">
                <h4 class="translatable_labs_center_modal_title">CocoBlockly Labs</h4>
                <hr style="border-top: 1px solid #ddd;margin:20px 0 10px 0;" />
                <div style="display:flex;justify-content:space-around;">
                    <div class="modal_setting_teacher_left setting_left_all">
                        <div class="card-image waves-effect waves-block waves-light">
                            <img class="" src="icons/AppCenter_ai_speech.jpg"
                                style="border: solid 1.2px lightgray;width: 100%;">
                        </div>
                        <div>
                            <span id="ac-card-title"
                                class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_speech_recognition"
                                style="font-size: 30px;">Speech
                                Recognition</span>
                            <p class="translatable_voice_input_content">The trend of robot development is artificial
                                intelligence. Deep learning is the frontier technology of intelligent robot and a new
                                topic
                                in the field of machine learning.Deep learning technology is widely used in agriculture,
                                industry, military, aviation and other fields, and the organic combination with machines
                                can
                                design intelligent robots with high working efficiency, high real-time and high
                                accuracy.
                            </p>
                        </div>
                    </div>
                    <div class="modal_setting_teacher_right setting_right_all">
                        <div class="translatable_computer_configuration"
                            style="background: rgb(33, 150, 243);padding: 5px 10px;color: #fff;border-top-left-radius: 5px;border-top-right-radius: 5px;">
                            <span>Computer Configuration Requirements</span>
                        </div>
                        <div class="setting_border">
                            <p><span class="translatable_the_operating_system">Minimum Opearting System
                                    version</span>：Windows (>Windows7), macOS (>10.11)</p>
                            <p><span class="translatable_resolution_of_the">Suggested Resolution
                                    Supported</span>：1440*768
                            </p>
                            <p><span class="translatable_memory_capacity">Memory Capacity</span>：8GB-16GB</p>
                            <p><span class="translatable_the_hard_disk">The Hard Disk</span>：256GB-512Gb</p>
                            <p><span class="translatable_the_graphics_card">The Graphics Card</span>：650M</p>
                            <p><span class="translatable_is_need_camera">Do you need a camera</span>：<span
                                    class="translatable_no_need">NO</span></p>
                            <p><span class="translatable_is_need_microphone">Do you need a microphone</span>：<span
                                    class="translatable_need">OK</span></p>
                        </div>
                        <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
                            href="#voice_input_modal" style="width: 94%;position: absolute;bottom: 5px;">Enter</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- voice speech modal -->
        <div id="voice_input_modal" class="modal voice-modal-trigger">
            <div class="modal-content">
                <div style="margin-top:10px;" class="row">
                    <div class="col s8">
                        <h4 class="translatable_speechDemoTitle">Speech Recognition</h4>
                    </div>
                    <div style="text-align:right;" class="col s4">
                        <a style="cursor: pointer;text-decoration:none; color:rgba(0,0,0.9);" id="voice_input_close"
                            class="modal-action modal-close">
                            <h4><i class="small material-icons">close</i></h4>
                        </a>
                    </div>
                </div>
                <div style="margin-bottom:10px;margin-top:-20px;" class="row">
                    <div class="col s12">
                        <p class="translatable_speechTip" style="font-size:15px;font-weight:200;">Voice recognition for
                            English, Cantonese & Mandarin.</p>
                        <hr
                            style="position:relative;top:-2px;margin-bottom:15px;border-color:rgba(0,0,0,.1); border-width: 1px;">
                    </div>
                </div>
                <div class="row" style="margin-top:-15px;margin-bottom:10px">
                    <div class="col s4">
                        <p class="translatable_speech_language_select">Select a language to recognize:</p>
                    </div>
                    <div style="margin-left:-20px;" class="col s2 speech_language" style="position:relative;top:3px">
                        <select id="speech_language_selection" class="browser-default" style="max-width:200px">
                            <option value="english" class="translatable_speech_language_English">English</option>
                            <option value="cantonese" class="translatable_speech_language_Cantonese">Cantonese</option>
                            <option value="mandarin" class="translatable_speech_language_Mandarin">Mandarin</option>
                        </select>
                    </div>
                    <div class="col" style="position:relative;top:5px">
                        <a id="speech_button" class="waves-effect waves-light btn blue translatable_speech_recognition"
                            style="padding:0 8px" onclick="processSpeech()/*startSpeech()*/">Start Recording</a>
                    </div>
                    <div class="col s3" style="position:relative;top:15px;">
                        <span style="font-weight:200;margin-left:-5px;" id="speech_process_title"
                            style="position:relative;top:-6px;"></span>
                    </div>
                </div>
                <div class="row">
                    <textarea id="speech_textarea" row="3" class="disabled translatable_speech_textarea_title"
                        style="width:772px;height:130px;resize:none;border-radius:5px;padding:10px;color:rgba(0,0,0,.4);"
                        readonly> Click on the mic button to start dictating...</textarea>
                </div>
                <div style="margin-top:5px;" class="row">
                    <div class="col s12 select_send_way" style="position: relative; margin-bottom:12px;">
                        <span class="select_send_way_color translatable_send_cloud">Send Cloud</span>
                        <!-- <span class="translatable_send_module">Send Module</span> -->
                    </div>
                    <div class="col s12 send_cloud" style="position: relative">
                        <div class="col s12">
                            <span id="speechDemoCloudRequest" style="font-weight:200;"></span>
                        </div>
                        <div class="translatable_selectEvent">Choose a CocoCloud event here, the analyzed result will
                            directly send to there</div>
                        <div style="width:95%">
                            <select style="margin-top:10px;" class="browser-default" id="AI_voice_events">
                                <option class="translatable_noEvent" value=null disabled>No event here. Login first
                                </option>
                            </select>
                        </div>
                        <span style="float:right;top: -45px;position: relative;">
                            <i id="update_Coevent_voice" class="material-icons">autorenew</i>
                        </span>
                    </div>
                    <div class="col s12 send_module" style="position: relative;display: none;height: 100px;">
                        <div class="translatable_send_module">Send Module</div>
                        <div class="input-field col s6" style="margin-top:2px;">
                            <span class="translatable_port">Port:</span>
                            <span class="port" style="padding-left:10px;"></span>
                        </div>
                        <div class="col s6" style="margin-top:2px;">
                            <a class="waves-effect waves-light blue lighten-2 btn translatable_connectBtns translatable_connectBtn disabled"
                                style="float:right;margin-right:5px">connect</a>
                            <a class="waves-effect waves-light blue lighten-2 btn translatable_disconnectBtn translatable_disconnectBtns "
                                style="float:right;margin-right:5px;display:none">disconnect</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    <!-- iframe -->
    <div id="iframe" class="modal modal_closes" style="width: 70%;">
        <span class="modal_close" style="padding: 15px;right: 12px;">
            <i class="small material-icons" style="font-size: 1.5rem;">close</i>
        </span>
        <!-- <iframe frameborder="0" style="width: 100%;height: 50vh;"></iframe> -->
    </div>
    <div id="updatePy" class="modal">
        <!-- <i id="updatePy_icon" class="material-icons right" style="cursor:pointer;">close</i> -->
        <div style="padding: 20px;">
            <h2 style="font-size: 30px;margin-bottom: 0;" class="translatable_update_file">更新文件</h2>
            <p>选择文件夹</p>
            <div id="select_folder" class="select_folder" style="height: 300px;">

            </div>
            <!-- <div class="folder_name">
                <span>文件名：</span>
                <input class="folder_name_inpit" type="text">
            </div> -->
            <div class="update_bottom">
                <button class="cancle">取消</button>
                <button class="confim">确定</button>
            </div>
        </div>
    </div>
    <!-- Custom Alert: Content is loaded using JavaScript to display alerts -->
    <div id="cus_alert" class="modale modal_small modal_custom">
        <div class="modal-content">
            <h5 id="cus_alert_title">Empty Alert</h5>
            <p><span id="cus_alert_body">Empty alert text</span></p>
        </div>
        <div class="modal-footer">
            <a id="cus_alert_button" class="waves-effect btn-flat modal-close blue"><span id="cus_alert_button_content"
                    style="color:#fff"></span></a>
            <a id="cus_alert_ok_link" class="waves-effect btn-flat modal-close blue"><span class="translatable_okay"
                    style="color:#fff">Okay</span></a>
        </div>
    </div>
    <!-- Env Detect Modal -->
    <div id="env_detect" class="modal modal_closes">
        <div class="modal-content">
            <span class="modal_close" style="padding: 15px;">
                <i class="small material-icons" style="font-size: 1.5rem;">close</i>
            </span>
            <h4 class="translatable_env_detect" style="margin-bottom:2.5rem;">Environment Detect</h4>
            <div id="detect_before" style="position:relative;">
                <div>
                    <img src="./icons/device-detect.svg" />
                </div>
                <div id="detect_preload" style="display:none;">
                    <div
                        style="position:relative;top:50%;transform:translateY(-50%);height:128px;width:128px;margin:0 auto;">
                        <div class="preloader-wrapper big active">
                            <div class="spinner-layer spinner-blue-only">
                                <div class="circle-clipper left">
                                    <div class="circle"></div>
                                </div>
                                <div class="gap-patch">
                                    <div class="circle"></div>
                                </div>
                                <div class="circle-clipper right">
                                    <div class="circle"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="detect_result" style="display:none;">
                <div style="border-bottom:2.5px #0057ff6e solid;padding:0.25rem 0;">
                    <h5 class="translatable_title_device">Device</h5>
                    <h5 class="translatable_title_result">Result</h5>
                    <h5 class="translatable_title_support">Support</h5>
                    <h5 class="translatable_title_suggest">Suggest</h5>
                </div>
                <div id="env_detect_os" style="margin-top:0.5rem;">
                    <div class="translatable_os">System</div>
                    <div></div>
                    <div class="detect-icons"></div>
                    <div></div>
                </div>
                <div id="env_detect_browser">
                    <div class="translatable_browser">Browser</div>
                    <div></div>
                    <div class="detect-icons"></div>
                    <div></div>
                </div>
                <div id="env_detect_plugin" style="margin-bottom:0.5rem;">
                    <div>Uploader</div>
                    <div></div>
                    <div class="detect-icons"></div>
                    <div></div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <a id="detect-btn" class="waves-effect waves-light btn-large blue">
                <span class="translatable_detect">Detect</span>
            </a>
        </div>
    </div>
    <!-- Serial Monitor   -->
    <div id="Serial-monitor" class="card card-serialMonitor" style="display:none;height:0;opacity:0;">
        <div class="code-header">
            <span class="code-header-logo"><i class="material-icons" style="padding-top:10px">search</i></span>
            <span class="card-title translatable_serialMonitor">Serial Monitor</span>
        </div>
        <div class="card-content" style="padding:8px 10px;">
            <div class="row">
                <div class="input-field col s6" style="margin-top:2px;">
                    <p id="ports-monitor" style="font-size:16px"><span class="translatable_port">Port:</span><span
                            style="padding-left:10px;"></span>
                    </p>
                </div>
                <div class="col s6" style="margin-top:2px;">
                    <a id="comms-cnt"
                        class="waves-effect waves-light blue lighten-2 btn translatable_connectBtn disabled"
                        style="float:right;margin-right:5px">connect</a>
                    <a id="comms-discnt" class="waves-effect waves-light blue lighten-2 btn translatable_disconnectBtn "
                        style="float:right;margin-right:5px;display:none">disconnect</a>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s5">
                    <select id="serial_output_style" style="font-size:16px">
                        <option value="" selected class="translatable_no_line_ending">No line ending
                        </option>
                        <option value="nl" class="translatable_newline">Newline</option>
                        <option value="cr" class="translatable_CR">Carriage return</option>
                        <option value="blc" class="translatable_NL_CR">Both NL &amp; CR</option>
                    </select>
                </div>
                <div class="input-field col s5">
                    <select id="serial_baud" style="font-size:16px">
                        <option value="300">300 <span class="translatable_baud">baud</span></option>
                        <option value="1200">1200 <span class="translatable_baud">baud</span></option>
                        <option value="2400">2400 <span class="translatable_baud">baud</span></option>
                        <option value="4800">4800 <span class="translatable_baud">baud</span></option>
                        <option value="9600" selected>9600 <span class="translatable_baud">baud</span>
                        </option>
                        <option value="19200">19200 <span class="translatable_baud">baud</span></option>
                        <option value="38400">38400 <span class="translatable_baud">baud</span></option>
                        <option value="57600">57600 <span class="translatable_baud">baud</span></option>
                        <option value="115200">115200 <span class="translatable_baud">baud</span></option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s10">
                    <input id="comms-msg" type="text" style="margin:0">
                    <label for="Sending_Messages" class="translatable_sendMsg" style="font-size:16px">Sending
                        Messages</label>
                </div>
                <div class="input-field col s2">
                    <a id="comms-send" class="waves-effect waves-light blue lighten-2 btn translatable_sendBtn disabled"
                        style="float:right;padding-right:5px">SEND</a>
                </div>
            </div>
            <div class="row">
                <div class="col s12">
                    <textarea id="commsBox" label="readonly" readonly></textarea>
                </div>
            </div>
            <div class="row" style="margin-bottom:8px">
                <div class="col s4" style="margin-top:8px">
                    <input id="autoscroll" type="checkbox" class="filled-in" checked="checked">
                    <label for="autoscroll">
                        <span class="translatable_autoScroll">Autoscroll</span>
                    </label>
                </div>
                <div class="input-field col s8" style="margin:4px,0,8px,0">
                    <a id="comms-clear" class="waves-effect waves-light blue lighten-2 btn translatable_comms_clear"
                        style="float:right;margin-right:5px">CLEAR</a>
                    <a id="comms-export"
                        class="waves-effect waves-light blue lighten-2 btn translatable_comms_export modal-trigger"
                        href="#export-file" style="float:right;margin-right:5px">EXPORT</a>
                </div>
            </div>
        </div>
    </div>
    <!-- login modal -->
    <div id="login_modal" class="modal modal_closes" style="top:62px">
        <div id="login_modal_preload" class="progress" style="display:none">
            <div class="indeterminate"></div>
        </div>
        <div class="modal-content" style="padding:0;">
            <span class="modal_close" style="padding: 15px;">
                <i class="small material-icons" style="font-size: 1.5rem;">close</i>
            </span>
            <!-- add for login iframe -->
            <div id="before_login"></div>
            <div id="after_login">
                <div id="userProfile_alias"></div>
                <div style="width: 250px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"><span
                        class="translatable_user_email">Email：</span><span id="userProfile_username"> </span></div>
                <div><span class="translatable_user_school">School：</span><span id="userProfile_school"></span></div>
                <div id="userProfile_apikey">
                    <div>
                        <span class="translatable_Event">Event: </span>
                        <span style="margin-top: -13px;float:right;transform:translateY(35%);">
                            <i id="update_Coevent" class="material-icons" onclick="updateProject()">autorenew</i>
                        </span>
                        <p class="get_event" style="margin: 5px 0;color: #2196F3;"></p>
                        <select
                            style="outline:0; width: 100%; margin: 6px auto 8px auto; border: 1px solid rgba(0,0,0,.2);"
                            class="browser-default" id="cloud_events" onchange="changeProject()">
                            <option value=null disabled>No Event</option>
                        </select>
                    </div>
                    <div style="margin-top:5px">
                        <span>API Key: </span>
                        <a id="apikey-copy" data-clipboard-action="copy" data-clipboard-target="#api-key">
                            <i class="material-icons tiny">content_copy</i>
                        </a>
                        <textarea style="padding: 6px 6px; margin-top: 4px;" id="api-key" readonly></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer" style="display:none;">
            <a id="modal_logout_btn" class="waves-effect btn-flat blue">
                <span class="translatable_signout">Sign Out</span>
                <img class="xuanhuan svgImg" src="/images/loading.svg" alt="">
            </a>
            <a id="modal_cococloud_btn" href="//cocorobo.cn/cloud" target="_black"
                class="waves-effect btn-flat blue"><span class="translatable_cococloud">Go to CocoCloud</span></a>
        </div>
    </div>
    <!-- local storage - import modal -->
    <div id="Storage_import_modal" class="modal" style="width:500px">
        <div class="modal-content">
            <h4 class="translatable_localStorageImport">Import Project</h4>
            <div> <span class="translatable_ImportTooltip" sytle="margin-left:10px">Select your project file(*.xml) and
                    import it to the current workspace.Warning:will replace current blocks</span></div>
            <div id="import_area" class="row" style="margin: 10px;height: 170px;position: relative;">
                <a id="modal_import_btn" class="waves-effect btn-flat blue" style="top:180px;position:fixed;"><span
                        class="translatable_import" style="font-size:15px;color:#fff">Import</span></a>
                <span class="translatable_ImportContent"
                    style="top: 187px;width:300px;position:fixed;text-align:center;">Click to choose a file from
                    your computer</span>
            </div>
        </div>
    </div>
    <!-- General Alert: Content is loaded using JavaScript to display alerts -->
    <div id="gen_alert" class="modale modal_closes modal_small" style="width:730px">
        <div class="modal-content">
            <span class="modal_close" style="padding: 15px;">
                <i class="small material-icons" style="font-size: 1.5rem;">close</i>
            </span>
            <h5 id="gen_alert_title">Empty Alert</h5>
            <p><span id="gen_alert_body">Empty alert text</span></p>
        </div>
        <div class="modal-footer">
            <a id="gen_alert_ok_link" class="waves-effect btn-flat modal-close blue"><span class="translatable_okay"
                    style="color:#fff">Okay</span></a>
            <a id="gen_alert_cancel_link" class="waves-effect btn-flat modal-close blue"><span
                    class="translatable_cancel" style="color:#fff">Cancel</span></a>
        </div>
    </div>
    <!-- Example Alert: Content is loaded using JavaScript to display alerts -->
    <div id="example_alert" class="modale modal_small" style="height:30%;width: 30%;">
        <div class="modal-content">
            <div id="loading" style="text-align:center;display: none;">
                <img src="./gif/loading.gif" style="width: 300px;" />
            </div>
            <p
                style="text-align:center;font-weight:bold;font-size:20px;z-index: 1087;position: absolute;left: 0;right: 0;top: 50%;">
                <span id="example_alert_body">Empty alert text</span>
            </p>
        </div>
    </div>
    <!-- local storage - export modal -->
    <div id="Storage_export_modal" class="modal" style="width:730px">
        <div class="modal-content">
            <h4 class="translatable_localStorageExport">Export Project</h4>
            <div> <span class="translatable_ExportTooltip" sytle="margin-left:10px">Export current project blocks and
                    save it your computer,so you can open it next time when you need it</span></div>
            <div class="row" style="margin: 10px;height: 200px;width: 640px;position: relative;">
                <div style="display:block">
                    <div class="col l6">
                        <img src="./icons/blockly-file-export_xml.png"
                            style="width:20%;position:relative;left:50%;right:50%;transform:translateX(-50%);">
                    </div>
                    <div class="col l6">
                        <img src="./icons/blockly-file-export_png.png"
                            style="width:20%;position:relative;left:50%;right:50%;transform:translateX(-50%);">
                    </div>
                </div>
                <div>
                    <div class="col l6">
                        <a id="modal_exportFileBtn" class="waves-effect btn-flat blue"
                            style="left: 50%;right: 50%;transform: translateX(-50%)"><span
                                class="translatable_exportFile" style="font-size:15px;color:#fff">Project
                                File</span></a>
                    </div>
                    <div class="col l6">
                        <a id="modal_exportSnapBtn" class="waves-effect btn-flat blue"
                            style="left: 50%;right: 50%;transform: translateX(-50%)"><span
                                class="translatable_exportSnap" style="font-size:15px;color:#fff">Snapshot</span></a>
                    </div>
                </div>
                <div>
                    <div class="col l6">
                        <p class="translatable_ExportFileContent"
                            style="display:block;text-align:center;width:80%;position: relative;left: 50%;right: 50%;transform: translateX(-50%);font-size:0.875rem">
                            Will export as an *xml file.<br>for you to continuing code nextime</p>
                    </div>
                    <div class="col l6">
                        <p class="translatable_ExportSnapContent"
                            style="display:block;text-align:center;width:80%;position: relative;left: 50%;right: 50%;transform: translateX(-50%);font-size:0.875rem">
                            Will export to a *png picture.<br>for your reference</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="display: none;" id="content_blocks"></div>
    <!-- cloud storage modal -->
    <div id="cloud_storage_modal" class="modal modal_closes">
        <div class="modal-content">
            <span class="modal_close" style="padding: 15px;">
                <i class="small material-icons" style="font-size: 1.5rem;">close</i>
            </span>
            <h4 class="translatable_cloudStorageTitle">Cloud Storage</h4>
            <div id="cloud_askLogin"></div>
            <div id="cloud_fileListArea" class="cloud-file" style="display:none">
            </div>
        </div>
        <div id="cloud_modal_preload" style="display:none">
            <div style="position:relative;top:50%;transform:translateY(-50%);height:128px;width:128px;margin:0 auto;">
                <div class="preloader-wrapper big active" style="top:0;left:0">
                    <div class="spinner-layer spinner-blue-only">
                        <div class="circle-clipper left">
                            <div class="circle"></div>
                        </div>
                        <div class="gap-patch">
                            <div class="circle"></div>
                        </div>
                        <div class="circle-clipper right">
                            <div class="circle"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- share modal -->
    <div id="share" class="modal">
        <div class="modal-content">
            <h4 class="">程序分享</h4>
            <div style="text-align: center;">
                <div id="QrImg" style="display: inline-block;"></div>
            </div>
            <p class="qrImgUrl"></p>
        </div>

    </div>

    <div class="downbox MouduleBox" style="display:none;position: fixed;width:175px;height:162px;right:50px;top:225px;">
        <div>
            <div class="translatable_iot_module">IoT Module</div>
        </div>
        <div>
            <div class="translatable_ai_module">A.I. Module</div>
        </div>
        <div><a href="//python-blockly.cocorobo.cn" style="color: #424242 !important;"
                class="translatable_cloud_mode">Cloud
                Mode</a></div>
        <div><a href="//ai-blockly.cocorobo.cn" style="color: #424242 !important;"
                class="translatable_javascript_mode">JavaScript Mode</a></div>
    </div>
    <div id="ai_tt" class="downbox MouduleBox" style="display:none;position: fixed;width:230px;right:50px;top:225px;">
        <div>1.Hello World</div>
        <div>2.螢幕顯示 Hello World</div>
        <div>3.畫布應用</div>
        <div>4.迷你相機</div>
        <div>5.簡易物體識別</div>
    </div>
    <!-- <iframe id="web" name="web" src="//x.cocorobo.cn/web.html" style="display: none"></iframe> -->
</body>
<script>
    $("#modal_logout_btn").on("click", function () {
        $("#modal_logout_btn").removeClass('blue');
        $("#modal_logout_btn").css('background', 'gray')
        $(".svgImg").css('display', 'block')
        $(".translate-signout").css('opacity', '0.5')
        $.ajax(`${CCB.base_url}api/logout`, {
            type: "GET",
            xhrFields: {
                withCredentials: true
            },
            success: () => {
                // $('#login_iframe').attr('src', '//staging.cocorobo.cn/login/');
                appendIframe("TM_login");
                $('#TM_login').children().css("height", "820px");
                appendIframe("before_login");
                appendIframe("cloud_askLogin");
                Materialize.toast(CCB.str_group.success_userLogout, 4000);
                CCB.userState = false;
                $("#cloud_fileListArea").html("");
                loginModalStatus();
                $("#modal_logout_btn").addClass('blue')
                $(".svgImg").css('display', 'none');
                $(".translate-signout").css('opacity', '1')
            }
        });
    });
</script>
<script type="text/javascript" src="./src/blockly/demo.js"></script>
<script type='text/javascript' src="./src/blockly/recorder.js"></script>
<script type='text/javascript' src="./src/blockly/jquery.s2t.js"></script>

</html>