chao
/
mini_cocopi


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

<head>
    <meta charset="utf-8" />
    <title>CocoBlockly CocoPi – CocoRobo CocoPi 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/codemirror/show-hint.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> -->

    <!--MD5加密-->
    <script type="text/javascript" src="static/js/md5.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="js_libs/qrcode.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/show-hint.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" class="noselecttext">
        <!-- Horizontal Navigation bar -->
        <nav id="nav_" class="nav-fixed arduino_teal" style="overflow:hidden">
            <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 Pi</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 style="font-size: 30px;">
                        <!-- <img style="height: 40px;margin-top: 10px;" class="left nav-icon" src="./icons/logo.png"> -->
                        <img style="height: 40px;margin-top: 10px;" class="left nav-icon" src="./icons/logo1.png">
                    </li>
                    <li>
                        <span class="vertical-separator"></span>
                    </li>
                    <!-- help button -->
                    <li>
                        <input id="sketch_name" placeholder="My Project Name"
                            class="sketch_name translatable_sketch_name"
                            style="background: rgba(0,0,0,0.4);padding: 4px 10px 4px 5px;border-radius: 20px;font-style: inherit;"
                            type="text">
                    </li>
                    <li>
                        <button id="downloadbutton" class="translatable_sketch_save"
                            style="color: #2c4fcd;font-weight: 700;border-radius: 30px;background: #fff;border: none;margin: 0 0 0 15px;font-size: 14px;padding: 8px 14px;">Save</button>
                    </li>
                    <li id="cloudBtn-shares" style="display: none;">
                        <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;display: none;">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;">Main Mode</option> -->
                            <option value="" style="color: #000;">AI Mode</option>
                        </select>
                    </li>
                    <li class="Mode_select_box">
                        <div class="ModeSelectBox">
                            <!-- <div class="ModeSelect" style="width: 100%;"> -->
                            <div class="ModeSelect" style="width: 100%;">
                                <div style="font-size: 0.9rem;">样例 </div>
                                <i class="down"
                                    style="position: relative;top: -34px;left: 20px;float: right;display: none;"></i>
                                <div class="downbox ModeBox downbox-style">
                                    <div style="display: none;">
                                        <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="Hardware4n">
                                                <div>四年级</div>
                                                <i class="downboxdown"></i>
                                                <ul class="Hardware4 HarxA">
                                                    <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 style="display: none;">
                                        <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 style="display: none;">
                                        <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>
                                            <li>计步器+LED 灯屏</li>
                                            <li>使用蓝牙发送数据</li>
                                            <li>屏幕显示蓝牙接收的数据</li>
                                        </ul>
                                    </div>
                                    <div style="display: none;">
                                        <div>IoT 模块联网案例</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA" style="top: calc(50% - 50px);">
                                            <li>按键发送光照数据至 CocoCloud</li>
                                            <li>按键发送环境数据至 IFTTT</li>
                                            <li>按键获取光照数据并根据条件亮灯</li>
                                            <li>定时发送环境数据至 CocoCloud</li>
                                            <li>定时接收环境数据并根据条件亮灯</li>
                                            <li>建立 WiFi 热点并显示连接设备数量</li>
                                            <li style="display: none;">局域网环境数据存储 - 服务器端</li>
                                            <li style="display: none;">局域网环境数据获取 - 客户端</li>
                                            <li>连接 WiFi 网络</li>
                                            <li style="display: none;">模块间按钮状态存储 - 服务端</li>
                                            <li style="display: none;">模块间按钮状态接收 - 客户端</li>
                                            <li style="display: none;">模块间进行 WebSocket 实时通信 - 发送端</li>
                                            <li style="display: none;">模块间进行 WebSocket 实时通信 - 接收端</li>
                                            <li>同步网络时间</li>
                                            <li>数字手表显示实时时间</li>
                                        </ul>
                                    </div>
                                    <div style="display: none;">
                                        <div>IoT工作坊上</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA" style="top: calc(50% - 30px)">
                                            <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 style="display: none;">
                                        <div>IoT工作坊下</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA" style="top: calc(50% - 120px)">
                                            <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 style="display: none;">
                                        <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>语音识别</li>
                                            <li>MNIST 手写数字识别</li>
                                        </ul>
                                    </div>
                                    <div style="display: none;">
                                        <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 style="display: none;">
                                        <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 style="display: none;">
                                        <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 style="display: none;">
                                        <div>AI AI 模块影音案例</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA">
                                            <li>播放录制的视频档案</li>
                                            <li>播放音乐</li>
                                            <li>录制摄像头画面并保存</li>
                                            <li>麦克风声音频谱分析</li>
                                        </ul>
                                    </div>
                                    <div style="display: none;">
                                        <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 style="display: none;">
                                        <div>AI 基础篇案例下</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA" style="top: calc(50% - 50px)">
                                            <li>物體識別進階</li>
                                            <li>人臉檢測</li>
                                            <li>顏色識別</li>
                                            <li>形狀識別（圓形）</li>
                                            <li>形狀識別（矩形）</li>
                                            <li>音頻分析</li>
                                        </ul>
                                    </div>
                                    <div style="display: none;">
                                        <div>AI 扩展使用案例</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA" style="top: calc(50% - 80px)">
                                            <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 style="display: none;">
                                        <div>AI 垃圾分类</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA" style="top: calc(50% - 80px)">
                                            <li>私服马达</li>
                                            <li>超声波感测器</li>
                                            <li>电动门</li>
                                        </ul>
                                    </div>
                                    <div style="display: none;">
                                        <div>AI 自动驾驶</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA" style="top: calc(50% - 80px)">
                                            <li>第一場-路標識別(香港標識)</li>
                                            <li>第二場-巡線（雙線）</li>
                                            <li>第二場-巡線（單線-靠左行駛）</li>
                                            <li>第一場-路標識別(香港標識)</li>
                                        </ul>
                                    </div>
                                    <div style="display: none;">
                                        <div>串口通讯</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA" style="top: calc(50% - 90px)">
                                            <li>IoT串口发送光线强度值</li>
                                            <li>AI屏幕显示串口光线强度值（配合1使用）</li>
                                            <li>AI串口发送人脸检测结果</li>
                                            <li>IoT屏幕显示串口人脸检测结果（配合3使用）</li>
                                        </ul>
                                    </div>
                                    <div>
                                        <div>机器狗案例</div>
                                        <i class="downboxdown"></i>
                                        <ul class="Hardware2 HarxA">
                                            <li>机器狗-人脸检测</li>
                                            <li>机器狗-人脸追踪</li>
                                            <li>机器狗-面部识别</li>
                                            <li>机器狗-图片分类</li>
                                            <li>机器狗-普通话识别</li>
                                            <li>机器狗-人体跟随</li>
                                            <li>机器狗-人体跟随</li>
                                            <li>机器狗-表情显示</li>
                                            <li>机器狗-音频分析</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li style="display: none;">
                        <div style="line-height: 30px;" class="selectMode_input">
                            <!-- <input type="text" value="IoT Module" id="iot_modules" readonly
                                class="selectMode_input browser-default" style="font-size: 0.9rem;"> -->
                            <span class="">V 831</span>
                            <i class="down" style="position: relative;top: 12px;float: right;"></i>

                            <div class="downbox MouduleBox">
                                <div>
                                    <!-- <div class="translatable_hardware_mode">Graphical Mode</div>
                                    <i class="downboxdown"></i> -->
                                    <ul class="Hardware2">
                                        <!-- <li class="translatable_iot_module">IoT Module</li> -->
                                        <li class="translatable_ai_module">A.I. Module</li>
                                        <li class="translatable_cloud_mode" style="display: none;"
                                            onclick='toHref("//python-blockly.cocorobo.cn")'>Cloud Mode</li>
                                        <li class="translatable_javascript_mode" style="display: none;"
                                            onclick='toHref("//ai-blockly.cocorobo.cn")'>JavaScript Mode</li>
                                    </ul>
                                </div>
                                <div class="aaa" style="display: none;">
                                    <div class="translatable_code_mode">Code Mode</div>
                                    <i class="downboxdown" style="top: 41px;"></i>
                                    <ul class="Hardware2" style="top: 44px;">
                                        <li class="translatable_iot_module" onclick='toHref_own("/python?id=iot")'>IoT
                                            Module</li>
                                        <li class="translatable_ai_module" onclick='toHref_own("/python?id=ai")'>A.I.
                                            Module
                                        </li>
                                        <!-- <li class="translatable_cloud_mode"
                                            onclick='toHref("//python-blockly.cocorobo.cn")'>Cloud Mode</li> -->
                                    </ul>
                                </div>
                                <!-- <div><a href="//python-blockly.cocorobo.hk" style="color: #424242 !important;"
                                        class="translatable_cloud_mode">Cloud
                                        Mode</a></div>
                                <div><a href="//ai-blockly.cocorobo.hk" style="color: #424242 !important;"
                                        class="translatable_javascript_mode">JavaScript Mode</a></div> -->
                            </div>
                        </div>
                    </li>
                    <li>

                        <a id="model_download_modal" style="position:relative; display: none;">
                            <!-- <i class="material-icons left" style="margin-right: 5px;font-size: 34px;">help_outline</i> -->
                            <span class="translatable_models">Help</span>
                            <img class="left nav-icon" src="./icons/nav_models.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>
                    <!-- 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="//xunlian.cocorobo.cn" target="_blank">
                                    <span class="translatable_learn_training">AI Training</span>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="//biaoji.cocorobo.cn/" target="_blank">
                                    <span class="translatable_learn_labeling">AI Labeling</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="//aihub.cocorobo.cn/art" target="_blank">
                                    <span class="translatable_learn_art">Learn AI: Art</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li style=" display: none;">
                        <!-- 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 style="display: none;">

                        <a id="help" 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>
                        <div id="allFileImport" class="btn" style="display:none;">
                            <input type="file">
                        </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 style="display: none;" 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' style="display: flex;width: 100vw;">
                        <div class="blockpy-editor" style="display:none;">
                            <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="py-editor" class="blockpy-editor card-panel"
                            style='height:100%;display:block;overflow:auto;float:left;border-right:1px solid #ccc;width: 66.7%;height: calc(100vh - 111px);'>
                            <div class="card-content" style="position:relative;overflow:auto;height: 100% !important;"
                                id="python_box">
                                <div class="blockpy-toolbar" style="position: relative;height: 100%;">
                                    <div class='blockpy-text blockpy-editor-menu'>
                                        <div class='blockpy-text-sidebar'></div>
                                        <textarea readonly class='codemirror-div language-python'></textarea>
                                    </div>
                                    <div style="display: none;" class="edit" id="edit"></div>
                                </div>
                            </div>
                        </div>
                        <p id="left_move_right"></p>
                        <div id='sss' style="display:block;overflow: hidden;width: 32.6%;min-width: 470px;">
                            <div class='blockpy-content-left card-panel card' id="mouseMove-top"
                                style='display: block;background: #f8f8f8;height: calc(100% - 235px);position:relative;'>
                                <div class="card-header"
                                    style='position:relative;height: 60px;line-height: 60px;background: #f1f2f5;    border-bottom: unset;'>

                                    <span id="Serial_Interaction" onclick="serialSwich('Serial_Interaction')"
                                        class="header-text translate-code translatable_Serial_Interaction switch_box switch_select">串口交互窗</span>

                                    <span id="serial_plotter"
                                        class="translatable_serial_plotter header-text translate-code switch_box1 switch_box"
                                        onclick="serialSwich('serial_plotter')">The
                                        data to print
                                    </span>
                                    <i id="repl_delete" class="material-icons sketch_name_icon"
                                        style="cursor: pointer;position: relative;top: 15px;display: none;">delete</i>
                                    <!-- <div class="editDiv" id="editDiv" style="top: 0;">
                                        <input type="checkbox" id="toggle-button">
                                        <label for="toggle-button" class="button-label">
                                            <span class="circle"></span>
                                            <span class="text on"></span>
                                            <span class="text off"></span>
                                        </label>
                                    </div> -->
                                    <a class="copy_code" style="position:absolute;top: 5px;right: 75px;"
                                        data-clipboard-action="copy">
                                        <img src="./images/icon-copy.png" style="width: 33px;margin-top:
                                                7px;"> </a>
                                    <a class="blockpy-toolbar-download" style="position:absolute;top: 5px;right:
                                            39px;"> <img src="./images/icon-downward.png"
                                            style="width: 33px;margin-top: 7px;"> </a>
                                    <a class="blockpy-toolbar-upload" style="position:absolute;top: 5px;right: 5px;">
                                        <img src="./images/upload.png" style="width: 33px;margin-top: 7px;"> </a>
                                    <img class="fullscreenIcon hidden" src="./images/icon-fullscreen.svg">
                                    <img class="fullscreenIcon hidden" src="./images/icon-fullscreen-exit.svg">
                                </div>
                                <div class="card-content"
                                    style="min-width:570px;position:relative;height: calc(100% - 60px);overflow:hidden;padding: 0 10px;background: #000;"
                                    id="repl_box">
                                    <div class="blockpy-toolbar" id="terminal" style="display:block;height: 99%;">
                                        <iframe id="webadb_iframe" src="/ya-webadb/apps/demo/out/shell.html"
                                            frameborder="0" style="width: 100%;height: 100%;" scrolling="no"
                                            allow="camera *; fullscreen *;fullscreen 'src'">

                                        </iframe>
                                        <div id="wabadb_iframe_model" class="hidden"></div>
                                    </div>
                                </div>

                                <div class="blockpy-toolbar hidden" id="serial_plotter_content"
                                    style="height: calc(99% - 57px);user-select: text;">
                                    <div class="editDiv" style="width: 100%;position: sticky;top: 0px;height: 100%;">
                                        <span class="translatable_serial_plotter serial-active"
                                            onclick="switchSerial('2')">终端显示</span>
                                        <span class="translatable_image_transmission"
                                            onclick="switchSerial('1')">图传</span>
                                        <div id="repl_box_content"
                                            style="height: calc(100% - 30px);background: rgb(255, 255, 255);overflow-y: auto;">
                                        </div>
                                        <div style="width: 100%;height: calc(100% - 30px);display: none;overflow-y: auto;background: rgb(255, 255, 255);position: relative;"
                                            id="image_transmission">
                                            <!-- <img id="image_transmission_canvas" style="width:100%;"> -->
                                            <canvas id="image_transmission_canvas" style="width:100%;height:100%">
                                        </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>
                            <p id="mouseMove"></p>
                            <div id="mouseMove-bottom" class='blockpy-content-left card-panel card'
                                style='display: block;background: #f8f8f8;min-height: 225px;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;'>
                                        <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" style="display: none;" class="header-link"
                                            href="javaScript:(0)"
                                            data-tooltip-id="9e546554-688a-01c7-cde3-faaff99b557d"> <img
                                                src="./icons/plugin_download.png">
                                            <img id="plugin_download_new"
                                                style="position:absolute;height:10px;left:3px;top:0px;display:none;"
                                                src="./icons/plugin_download_new.png">
                                        </a>
                                        <a style="display: none;" href="#iframe" class="modal-trigger header-link"
                                            id="showIframe">
                                            <img src="./icons/firmware.png">
                                        </a>
                                        <a href="#qrCode" class="modal-trigger header-link" id="">
                                            <i id="QRCodeIcon" style="margin-top: 11px;"
                                                class="material-icons sketch_name_icon hidden">wifi</i>
                                        </a>
                                        <a href="javascript:;" style=" display: none;" id="updatePython"
                                            class="modal-trigger header-link" style="display: none;">
                                            <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>
                                    <a href="#webadbIframeFile" id="message_file" class="modal-trigger"
                                        style="position: relative;top: 5px;display: none;">
                                        <i class="material-icons sketch_name_icon">create_new_folder</i>
                                    </a>
                                    <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>
                                    <!-- inline-block -->
                                    <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>
                                    <div id="webadbErro" style="display: none;">
                                        <i style="color: red;position: absolute;top: 17px;"
                                            class="material-icons sketch_name_icon hidden">error</i>
                                    </div>
                                </div>
                                <div class="card-content" style="padding:8px 10px;width:100%;">
                                    <div class="row" style="margin-bottom: 5px;">
                                        <div class="col s12"><img id="error-btn" class="activator"
                                                src="./icons/error.png">
                                            <span id="status_bar">
                                                <span id="status_txt"
                                                    class="translatable_statusNotConn">模块已断开，请重新连接。</span>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="row">

                                        <div class="progress" style="margin:7px 0;">
                                            <div class="determinate blue" style="width:0%;"></div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col s8" style="display: flex;">
                                            <button id="webadb_connect" class="webadb_connect_class btn blue " disabled
                                                onclick="webadbConnect()">连接</button>
                                            <input id="IP" type="text" placeholder="请输入ip地址" style="display: none;">
                                        </div>
                                        <div class="col s4">
                                            <button id="webadb_add" style="width:100%;"
                                                class="translatable_addDevice btn blue"
                                                onclick="addWebadb()">添加</button>
                                        </div>
                                    </div>
                                    <div class="row btn-network" style="display: none;">
                                        <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>
                                    <div class="row btn-network hidden" style="display: none;">
                                        <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="margin-top: 2%">
                                        <div id="uploader-btns" class="col s8" style="display: flex;">
                                            <div id="runCode" onclick="run_code()" style="width: 100%;" class="waves-effect
                                            waves-light btn blue disabled">
                                                <i style="cursor: pointer;" class="fa fa-play-circle"
                                                    aria-hidden="true"></i>
                                                <span class="translatable_runCode"></span>
                                            </div>
                                            <!-- onclick="uploadpyfile()" -->
                                            <a id="uploadpy" class="waves-effect
                                            waves-light btn blue disabled" style="margin-left:0.5rem;width: 100%;">
                                                <i style="cursor: pointer;" class="fa fa-upload" aria-hidden="true"></i>
                                                <span class="translatable_uploadFiles"></span>
                                            </a>
                                            <a id="backHome" onclick="backHome()" class="waves-effect
                                                     waves-light btn blue disabled"
                                                style="margin-left:0.5rem;width: 100%;">
                                                <img src="./icons/stop.png" style="top:6px">
                                                <span class="translatable_resetMainUI">返回菜单</span>
                                            </a>
                                            <li id="changeRunCuploadFilesode"
                                                style="display: none;margin-right:0.5rem;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="resetMainUIBtn" onclick="resetmainUI()" class="waves-effect
                                                waves-light btn blue  disabled"
                                                style="margin-right:0.5rem;">
                                                <span id="resetMainUI">Reset Main UI</span></a> -->
                                            <!-- <div style="float: right;">
                                                <a id="poweroff" onclick="systemCommand('poweroff')" class="waves-effect
                                                        waves-light btn blue disabled"
                                                    style="margin-right:0.5rem;"><span
                                                        class="translatable_shutDown">关机</span></a>
                                            </div>
                                            <div style="float: right;">
                                                <a id="resetDevice" onclick="systemCommand('reboot')" class="waves-effect
                                                    waves-light btn blue disabled" style="margin-right:0.5rem;"><span
                                                        class="translatable_resetDevice">Reset
                                                        Device</span></a>
                                            </div> -->
                                        </div>
                                        <div class="col s4">
                                            <div class="systemBtn" style="display:flex;">
                                                <a id="resetDevice" onclick="systemCommand('reboot')" class="waves-effect
                                                            waves-light btn blue disabled"
                                                    style="width:100%;margin-right:0.5rem;"><span
                                                        class="translatable_resetDevice">Reset
                                                        Device</span></a>
                                                <a id="poweroff" onclick="systemCommand('poweroff')" class="waves-effect
                                                        waves-light btn blue disabled" style="width:100%;"><span
                                                        class="translatable_shutDown">关机</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.10</span>
                                        <a download=""
                                            href="//cocorobo.cn/downloads/CocoBlocklyXUploaderInstallerv1.0.17.pkg"
                                            target="_black"><img src="./icons/mac-icon.png">Mac </a>
                                        <a download=""
                                            href="//cocorobo.cn/downloads/CocoBlocklyXUploaderInstallerv1.0.17.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" class="card-icon-area">
                <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" style="display: none;" 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" style="display: none;"
                    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" onclick="$('#ai_tt')[0].style.display = 'block';">
                    <img class="bar-icon" src="./icons/l.png">
                </li> -->
            </ul>
            <a id='side-lang-trigger' class='dropdown-button' style="top:110px" 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' style="top:200px" 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_left" style="color:#fff;">可可乐博（深圳）科技有限公司 © </span>
                    <span id="copyright_middle" style="color:#fff;"> 2023</span>
                    <span class="translatable_copyright_right" style="color:#fff;">版权所有</span>
                </div>

                <div style="">
                    <span id="update_log" style="cursor: pointer;">
                        <span class="translatable_update_logs" style="color: #fff;">更新日志</span>
                        <i class="material-icons sketch_name_icon"
                            style="margin-left:5px;cursor: pointer;position: relative;top: 7px;">message</i>
                    </span>
                    <!-- <span>
                        <a id="help" target="_blank" href="//x-help.cocorobo.cn" style="position:relative">
                            
                            <span class="translatable_help_board" style="color: #fff;">Help</span>
                            <img class="left nav-icon" src="./icons/nav_help.png" style="height: 20px;margin-top: 3px;">
                        </a>
                    </span> -->
                    <span class="vertical-separator" style="padding: 4px 6px 4px 6px;"></span>
                    <span>CocoBlockly Pi</span>
                </div>
            </div>
        </footer>
        <!-- Wetech -->
        <div id="WeTech_Modal" class="modal WeTech_Modal modal_closes" style="width:730px">
            <div class="modal-content">
                <span class="modal_close" style="padding: 5px;"><i class="small material-icons"
                        style="font-size: 1.5rem;">close</i></span>
                <h4 class="translatable_app_center_WeTech" style="width: 80%;">WeTech</h4>
                <div id="wetech_no_login" style="display: none;height: 300px;padding-top: 50px;padding-bottom: 50px;">
                    <div style="text-align: center;">
                        <div>
                            <span id="weTech_user">用户名：</span>
                            <input type="text" class="wetechUsername" id="WeTech_username" />
                        </div>
                        <div>
                            <span id="weTech_pass">密&nbsp;&nbsp;&nbsp;码：</span>
                            <input type="password" class="wetechPassword" id="WeTech_password" />
                        </div>
                    </div>
                    <div style="text-align: center;margin-top: 20px;">
                        <button type="button" id="wetechLogin" class="loginbtn" onclick="wetech_login()"
                            style="cursor: pointer;">登录</button>
                    </div>
                    <div style="text-align: center;margin-top: 16px;">
                        <span style="color: red;" id="loginError"></span>
                    </div>
                </div>
                <div id="wetech_logined" style="display: none;">
                    <div style="display: flex;justify-content: flex-end;margin-bottom:10px;"><span id="usernames"
                            style="margin-right: 10px;"></span><a style="cursor: pointer;"
                            onclick="wetech_logout()"><span id="weTech_logout">退出</span></a></div>
                    <div style="display: flex;justify-content: space-between;">
                        <div style="width: 49%;border: 1px solid black;height: 300px;overflow-x: hidden;overflow-y: scroll;padding: 6px;padding-left: 10px;"
                            id="gateway">

                        </div>
                        <div style="width: 49%;border: 1px solid black;height: 300px;overflow-x: hidden;overflow-y: scroll;padding: 6px;padding-left: 7px;"
                            id="device">

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

            </div>
        </div>
        <!-- app center modal -->
        <div id="app_center_modal" class="modal">
            <span class="modal_close" style="padding: 5px;position: absolute;right: 0;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;"
                    onclick="$('#app_center_modal').modal('close')">close</i></span>
            <!-- <div id="TM_login"></div> -->
            <div class="modal-content" style="padding: 20px;">
                <span class="modal_close" style="padding: 5px;">
                    <i class="small material-icons" style="font-size: 1.5rem;"
                        onclick="$('#app_center_modal').modal('close')">close</i>
                </span>
                <h4 class="translatable_labs_center_modal_title" style="width: 80%;">CocoBlockly Pi 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="#setting_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;display: none;" class="col s6">
                                <div class="card">
                                    <div class="card-image waves-effect waves-block waves-light">
                                        <img class="" src="icons/WeTech.jpg">
                                    </div>
                                    <div class="card-content">
                                        <span id="ac-card-title"
                                            class="ac-card-title card-title activator grey-text text-darken-4 ">WeTech</span>
                                        <p class="">
                                            <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
                                                onclick='openLabs("#WeTech_Modal")'>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_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"
                                                onclick='openLabs("//thingspeak.com")'>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"
                                                onclick='openLabs("//ifttt.com/maker_webhooks")'>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 "
                                                onclick='openLabs("//spacelamb.12wave.com")'>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>
        <!--center game modal-->
        <div id="center_game_modal" class="modal">
            <span class="modal_close" style="padding: 5px;position: absolute;right: 0;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;"
                    onclick="$('#center_game_modal').modal('close');$('#app_center_modal').modal('open');CCB.downloadModelUrl = '';">close</i></span>
            <div id="TM_center_game" style="margin-top:10px;top:10%;position:relative"></div>
        </div>

        <!-- 显示Teachable Machine modal配置弹框 -->
        <div id="setting_teacher" class="modal">
            <span class="modal_close" style="padding: 5px;position: absolute;right: 0;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;"
                    onclick="$('#setting_teacher').modal('close');$('#app_center_modal').modal('open')">close</i></span>
            <div class="modal-content" style="padding: 20px;">
                <span class="modal_close" style="padding: 5px;">
                    <i class="small material-icons" style="font-size: 1.5rem;"
                        onclick="$('#setting_teacher').modal('close');$('#app_center_modal').modal('open')">close</i>
                </span>
                <h4 class="translatable_labs_center_modal_title" style="width: 80%;">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">
            <span class="modal_close" style="padding: 5px;position: absolute;right: 0;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;"
                    onclick="$('#Teachable_Machine').modal('close');$('#setting_teacher').modal('open');">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">
            <span class="modal_close" style="padding: 5px;position: absolute;right: 0;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;"
                    onclick="$('#setting_teacher_ponsenet').modal('close');$('#app_center_modal').modal('open')">close</i></span>
            <div class="modal-content" style="padding: 20px;">
                <h4 class="translatable_labs_center_modal_title" style="width: 80%;">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" style="position:relative">
            <span class="modal_close" style="padding: 5px;position: absolute;right: 0;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;"
                    onclick="$('#Teachable_Machine_ponsenet').modal('close');$('#setting_teacher_ponsenet').modal('open')">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%;display: none;"></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">
            <span class="modal_close" style="padding: 5px;position: absolute;right: 0;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;"
                    onclick="$('#setting_objectRecog').modal('close');$('#app_center_modal').modal('open')">close</i></span>
            <div class="modal-content" style="padding: 20px;">
                <span class="modal_close" style="padding: 5px;">
                    <i class="small material-icons" style="font-size: 1.5rem;"
                        onclick="$('#setting_objectRecog').modal('close');$('#app_center_modal').modal('open')">close</i>
                </span>
                <h4 class="translatable_labs_center_modal_title" style="width: 80%;">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_class1" style="position:relative">
            <span class="modal_close" style="padding: 5px;position: absolute;right: 10px;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;"
                    onclick="$('#Object_recog_modal').modal('close');$('#setting_objectRecog').modal('open')">close</i></span>
            <div id="TM_login_object" style="margin-top:10px;top:10%;position:relative"></div>
            <div id="TM_iframe_object" style="height:98%; 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">
            <span class="modal_close" style="padding: 5px;position: absolute;right: 0;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;"
                    onclick="$('#setting_posenetRecog').modal('close');$('#app_center_modal').modal('open')">close</i></span>
            <div class="modal-content" style="padding: 20px;">
                <span class="modal_close" style="padding: 5px;">
                    <i class="small material-icons" style="font-size: 1.5rem;"
                        onclick="$('#setting_posenetRecog').modal('close');$('#app_center_modal').modal('open')">close</i>
                </span>
                <h4 class="translatable_labs_center_modal_title" style="width: 80%;">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" style="position:relative">
            <span class="modal_close" style="padding: 5px;position: absolute;right: 10px;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;"
                    onclick="$('#Posent_recog_modal').modal('close');$('#setting_posenetRecog').modal('open')">close</i></span>
            <div id="TM_login_posenet" style="margin-top:10px;top:10%;position:relative"></div>
            <div id="TM_iframe_posenet" style="height:98%; 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">
            <span class="modal_close" style="padding: 5px;position: absolute;right: 0;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;"
                    onclick="$('#setting_webcam_capture_modal').modal('close');$('#app_center_modal').modal('open')">close</i></span>
            <div class="modal-content" style="padding: 20px;">
                <span class="modal_close" style="padding: 5px;">
                    <i class="small material-icons" style="font-size: 1.5rem;"
                        onclick="$('#setting_webcam_capture_modal').modal('close');$('#app_center_modal').modal('open')">close</i>
                </span>
                <h4 class="translatable_labs_center_modal_title" style="width: 80%;">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">
            <span class="modal_close" style="padding: 5px;position: absolute;right: 10px;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;"
                    id="emotion_recognition_close">close</i></span>
            <div id="TM_login_webcam_capture_modal" style="margin-top:10px;top:10%;position:relative"></div>
            <div id="emotionRecognitionTitle" class="modal-content" style="display: none;">
                <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;display: none;" class="col s4">
                        <a style="cursor: pointer;text-decoration:none; color:rgba(0,0,0.9);"
                            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 translatable_emotion_result_default">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 translatable_emotion_expression">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 translatable_emotion">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">
            <span class="modal_close" style="padding: 5px;position: absolute;right: 0;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;"
                    onclick="$('#setting_gesture_recog_modal').modal('close');$('#app_center_modal').modal('open')">close</i></span>
            <div class="modal-content" style="padding: 20px;">
                <span class="modal_close" style="padding: 5px;">
                    <i class="small material-icons" style="font-size: 1.5rem;"
                        onclick="$('#setting_gesture_recog_modal').modal('close');$('#app_center_modal').modal('open')">close</i>
                </span>
                <h4 class="translatable_labs_center_modal_title" style="width: 80%;">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">
            <span class="modal_close" style="padding: 5px;position: absolute;right: 10px;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;"
                    id="gesture_recognition_close">close</i></span>
            <div id="TM_login_gesture_recog_modal" style="margin-top:10px;top:10%;position:relative"></div>
            <div id="gestureRecognitionTitle" class="modal-content" style="display: none;">
                <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;display: none;" class="col s2">
                        <a style="cursor: pointer;text-decoration:none; color:rgba(0,0,0.9);"
                            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">
            <span class="modal_close" style="padding: 5px;position: absolute;right: 0;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;"
                    onclick="$('#setting_voice_input_modal').modal('close');$('#app_center_modal').modal('open')">close</i></span>
            <div class="modal-content" style="padding: 20px;">
                <h4 class="translatable_labs_center_modal_title" style="width: 80%;">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">
            <span class="modal_close" style="padding: 5px;position: absolute;right: 10px;cursor: pointer;"><i
                    class="small material-icons" style="font-size: 1.5rem;" id="voice_input_close">close</i></span>
            <div id="TM_login_voice_input_modal" style="margin-top:10px;top:10%;position:relative"></div>
            <div class="modal-content" id="voice_input_modal_reg" style="display: none;">
                <div style="margin-top:10px;" class="row">
                    <div class="col s8">
                        <h4 class="translatable_speechDemoTitle">Speech Recognition</h4>
                    </div>
                    <div style="text-align:right;display: none;" class="col s4">
                        <a style="cursor: pointer;text-decoration:none; color:rgba(0,0,0.9);"
                            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 auxiliary modal_closes overflowHidden">
        <div class="modal-content" style="background-color: white;height: 100%;">
            <span class="modal_close" style="padding: 5px;right: 15px;top: 10px;">
                <i class="small material-icons" style="font-size: 1.5rem;">close</i>
            </span>
            <h4 class="translatable_auxiliary">辅助工具</h4>
            <div class="download_auxiliary">
                <div style="width:80%" class="translatable_system_SDFormatterv4">
                    这是一个内存可格式化软件，通过该软件，可以将内存卡格式化之后，可以使内存卡安装831镜像的系统</div>
                <a href="//cocorobo.cn/downloads/SDFormatterv4.zip" target="_black"
                    class="translatable_download_file btn blue">下载</a>
            </div>
            <div class="download_auxiliary">
                <div style="width:80%" class="translatable_system_PhoenixCard">这是一个把镜像系统文件烧录到内存卡中的一个软件</div>
                <a href="//cocorobo.cn/downloads/PhoenixCard-v2.4.8.zip" target="_black"
                    class="translatable_download_file btn blue">下载</a>
            </div>
            <div class="download_auxiliary">
                <div style="width:80%" class="translatable_system_file">这个是我们镜像系统中的文件，系统镜像烧录之后，需要把这个压缩包解压放入系统文件里面。</div>
                <a href="//cocorobo.cn/downloads/systemFile.zip" target="_black"
                    class="translatable_download_file btn blue">下载</a>
            </div>
            <div class="download_auxiliary">
                <div style="width:80%" class="translatable_android_zip">这是一个安卓手机的谷歌浏览器的安装包，安卓后可以在手机上体验我们的平台。</div>
                <a href="//cocorobo.cn/downloads/com.android.chrome_v103.0.5060.129_itmop.com.apk" target="_black"
                    class="translatable_download_file btn blue">下载</a>
            </div>
        </div>
        <!-- <iframe frameborder="0" style="width: 100%;height: 50vh;"></iframe> -->
    </div>
    <div id="qrCode" class="modal auxiliary modal_closes overflowHidden">
        <div class="modal-content" style="background-color: white;height: 100%;">
            <span class="modal_close" style="padding: 5px;right: 15px;top: 10px;">
                <i class="small material-icons" style="font-size: 1.5rem;">close</i>
            </span>
            <h4 class="translatable_getQrCode">扫描二维码，连接网络</h4>
            <div class="qrcodeInput">
                <span class="translatable_SSID">SSID:</span>
                <input id="SSID" type="text">
            </div>
            <div class="qrcodeInput">
                <span class="translatable_PWD">PWD:</span>
                <input id="PAS" type="text">
            </div>
            <div class="qrcodeInput">
                <button class="btn blue translatable_QrCode" onclick="getQrCode()">生成二维码</button>
            </div>
            <div style="width: 200px;margin: 20px auto;" class="codeImgDiv">
                <div id="codeImg"></div>
            </div>
            <div class="qrcodeInput"
                style="position: absolute;bottom: 50px;left: 50%;transform: translate(-50%, 10px);">
                <p class="translatable_CocoPi_note">打开CocoPi上的扫码联网样例，扫描屏幕二维码，连接上网</p>
            </div>
        </div>
    </div>
    <div id="updatePy" class="modal">
        <!-- <span class="modal_close" style="padding: 15px;right: 12px;">
            <i class="small material-icons" style="font-size: 1.5rem;">close</i>
        </span> -->
        <!-- <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;width: 80%;" class="translatable_update_file">更新文件</h2>
            <div style="width: 100%;">
                <div style="width: 30%;display:inline-block;">
                    <p class="translatable_choose_file">选择文件夹</p>
                </div>
                <div style="width: 1%;display:inline-block;"></div>
                <div style="width: 68%;display:inline-block;text-align: right;" class="fileManage">
                    <button id="return_folder" class="translatable_folder" onclick="return_pre_folder()"
                        style="margin-right: 10px;height: 33px;display: none;">返回上一级</button>
                    <button style="margin-right: 10px;height: 33px;" id="fileUpload">
                        <img src="blockly/media/fileManage/upload.png"
                            style="vertical-align:middle;width: 20px;height: 20px;" />
                        <span class="translatable_upload_file">上传文件</span>
                        <!-- <input type="file" id="translatable_upload_file"> -->
                    </button>
                    <button style="margin-right: 10px;height: 33px;" id="new_folder_btn">
                        <img src="blockly/media/fileManage/create.png"
                            style="vertical-align:middle;width: 20px;height: 20px;" />
                        <span class="translatable_new_folder">新文件夹</span>
                    </button>
                    <!-- <a id="new_folder" href="#new_folder_modal" class="modal-trigger header-link" style="display: none;">...</a> -->
                    <button id="delete_folder" class="translatable_delete" onclick="deleteFileOrFolder()"
                        style="background-color: #6481e7;display: inline-block;">删除</button>
                    <button id="cancle_delete" class="translatable_cancel_delete" onclick="cancelDeleteFileOrFolder()"
                        style="background-color: #6481e7;display: none;">取消删除</button>
                </div>
            </div>
            <div id="select_folder" class="select_folder"
                style="min-height: 300px;max-height: 300px;overflow: auto;overflow-x: hidden;overflow-y: scroll;"></div>
            <!-- <div class="folder_name">
                <span>文件名：</span>
                <input class="folder_name_inpit" type="text">
            </div> -->
            <div class="update_bottom">
                <button class="cancle translatable_cancel">取消</button>
                <button class="confim translatable_confirm" style="display: none;">确定</button>
            </div>
        </div>
    </div>
    <div id="new_folder_modal" class="modal">
        <span style="padding: 5px;right: 12px;position: absolute;top: 0;cursor: pointer;z-index: 10;"
            id="new_folder_modal_close">
            <i class="small material-icons" style="font-size: 1.5rem;">close</i>
        </span>
        <div style="padding: 20px;">
            <h2 style="font-size: 30px;margin-bottom: 0;width: 80%;" class="translatable_new_file_folder">新建文件夹</h2>
            <div style="width: 100%;">
                <div style="width: 49%;display:inline-block;">
                    <p class="translatable_new_file_folder_name">请输入文件夹名称..</p>
                </div>
            </div>
            <input type="text" style="border: 1px solid #9e9e9e;padding-left: 5px;" id="folder_name"
                class="folder_name_inpit" />
            <!-- <div class="folder_name">
                <span>文件名：</span>
                <input class="folder_name_inpit" type="text">
            </div> -->
            <div class="update_new_folder_bottom">
                <button class="new_folder_cancle translatable_cancel" style="margin-right: 10px;">取消</button>
                <button class="new_folder_confim translatable_confirm">确定</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: 5px;">
                <i class="small material-icons" style="font-size: 1.5rem;">close</i>
            </span>
            <h4 class="translatable_env_detect" style="margin-bottom:2.5rem;width: 80%;">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 id="env_detect_patch">
                    <div class="translatable_patch">Patch</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: 5px;">
                <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 mm modal_closes" style="width:500px">
        <div class="modal-content">
            <span class="modal_close" style="padding: 5px;"><i class="small material-icons"
                    style="font-size: 1.5rem;">close</i></span>
            <h4 class="translatable_localStorageImport" style="width: 80%;">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;left:320px;position:fixed;"><span class="translatable_import"
                        style="font-size:15px;color:#fff">Import</span></a>
                <span class="translatable_ImportContent"
                    style="top: 230px;width:300px;left:27%;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="wifi_process" class="modale modal_closes modal_small" style="width:730px">
        <div class="modal-content">
            <span class="modal_close" style="padding: 5px;">
                <i class="small material-icons" style="font-size: 1.5rem;">close</i>
            </span>
            <h5 style="width: 80%;" class="translatable_wifiProblem">无线连接问题</h5>
            <p class="translatable_problem1">1、首先将模块和平台连接在同一网络下；</p>
            <p class="translatable_problem2">2、填写联网成功获取的IP地址</p>
            <p><span class="translatable_problem3">3、该功能需要你同意访问,</span>&nbsp;&nbsp;&nbsp;<span style="color: #2196F3;"
                    id="getIpLink"></span></p>
            <p class="translatable_problem4">4、点击下方按钮，页面将进行跳转</p>
        </div>
        <div class="modal-footer">
            <a onclick="linkOkay()" class="waves-effect btn-flat blue"><span class="translatable_okay"
                    style="color:#fff">Okay</span></a>
            <a class="waves-effect btn-flat modal-close blue"><span class="translatable_cancel"
                    style="color:#fff">Cancel</span></a>
        </div>
    </div>

    <div id="gen_alert" class="modale modal_closes modal_small" style="width:730px">
        <div class="modal-content">
            <span class="modal_close" style="padding: 5px;">
                <i class="small material-icons" style="font-size: 1.5rem;">close</i>
            </span>
            <h5 id="gen_alert_title" style="width: 80%;">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 mm modal_closes" style="width:730px">
        <div class="modal-content">
            <span class="modal_close" style="padding: 5px;"><i class="small material-icons"
                    style="font-size: 1.5rem;">close</i></span>
            <h4 class="translatable_localStorageExport" style="width: 80%;">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" style="background-color: white;">
            <span class="modal_close" style="padding: 5px;">
                <i class="small material-icons" style="font-size: 1.5rem;">close</i>
            </span>
            <h4 class="translatable_cloudStorageTitle" style="position: relative;z-index: 1050;width: 80%;">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>

    <!-- 手动选择模式 modal-->
    <div id="selectModule" class="modal selectModuleModal">
        <div class="modal-content" style="text-align: center;">
            <h6 class="translatable_selectModule">选择模块</h6>
            <div
                style="text-align: center;display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 20px;">
                <div style="display: flex;flex-direction: column;height: 220px;width: 220px;justify-content: center;align-items: center;"
                    id="AI_module" onclick="select_Module('AI_module')">
                    <span class="translatable_ai_mode" style="margin-bottom: 10px;">AI 模块</span>
                    <img src="./images/AI_Module.png" width="200" />
                </div>
                <div style="display: flex;flex-direction: column;height: 220px;width: 220px;justify-content: center;align-items: center;"
                    id="IoT_module" onclick="select_Module('IoT_module')">
                    <span class="translatable_iot_mode" style="margin-bottom: 10px;">IoT 模块</span>
                    <img src="./images/IoT_Module.png" width="200" />
                </div>
            </div>

            <div style="margin-top: 20px;">
                <button onclick="selectModule_confirm()"
                    class="waves-effect waves-light btn blue translatable_confirm">确定</button>
            </div>
        </div>

    </div>

    <div class="downbox MouduleBox" id="MouduleBox"
        style="display:none;position: fixed;width:175px;height:122px;right:50px;top:225px;">
        <div>
            <div class="translatable_iot_module">IoT Module</div>
        </div>
        <div>
            <div class="">V 831</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="MouduleBox"
        style="display:none;position: fixed;width:230px;right:-15px;top:225px;z-index: 1000;">
        <div class="downbox1 ModeBox1 downbox-style">
            <div>
                <div>人工智能教材程序</div>
                <i class="downboxdown1"></i>
                <div class="Hardware2 HarxA1" id="aaaa" style="height:auto;top:-35px">
                    <div class="Hardware9">
                        <div>三年级</div>
                        <i class="downboxdown1"></i>
                        <ul class="Hardware4 HarxA1" style="left: calc(100% - 415px);">
                            <li>录制语音指令</li>
                            <li>语音识别台灯</li>
                            <!-- <li>人脸识别防盗门</li> -->
                        </ul>
                    </div>
                    <div class="Hardware4n" style="display: none;">
                        <div>四年级</div>
                        <i class="downboxdown1"></i>
                        <ul class="Hardware4 HarxA1" style="left: calc(100% - 415px);">
                            <li>人臉檢測</li>
                            <li>物體識別進階</li>
                        </ul>
                    </div>
                    <div class="Hardware5">
                        <div>五年级</div>
                        <i class="downboxdown1"></i>
                        <ul class="Hardware4 HarxA1" style="left: calc(100% - 415px);">
                            <li>录制语音指令</li>
                            <li>智能窗帘</li>
                            <li>水果采摘机器人</li>
                            <li>智能质检机器人</li>
                        </ul>
                    </div>
                    <div class="Hardware6">
                        <div>六年级</div>
                        <i class="downboxdown1"></i>
                        <ul class="Hardware4 HarxA1" style="left: calc(100% - 415px);">
                            <li>智能交通信号灯</li>
                            <li>导盲项链</li>
                            <li>二维码包裹分拣机器人</li>
                            <li>无人驾驶循环小车</li>
                        </ul>
                    </div>
                    <div class="Hardware7">
                        <div>七年级</div>
                        <i class="downboxdown1"></i>
                        <ul class="Hardware4 HarxA1" style="left: calc(100% - 415px);">
                            <li>人脸辨识电子警察</li>
                        </ul>
                    </div>
                    <div class="Hardware8">
                        <div>八年级</div>
                        <i class="downboxdown1"></i>
                        <ul class="Hardware4 HarxA1" style="left: calc(100% - 415px);">
                            <li>支付台</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div>
                <div>IoT 模块基础案例</div>
                <i class="downboxdown1"></i>
                <ul class="Hardware2 HarxA1">
                    <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="downboxdown1"></i>
                <ul class="Hardware2 HarxA1">
                    <li>使用 LED 灯屏</li>
                    <li>使用电机驱动模块</li>
                    <li>使用游戏手柄 + LED 灯屏</li>
                    <li>使用游戏手柄 + 屏幕模块</li>
                    <li>在扩展模块上控制舵机</li>
                    <li>屏幕显示Hello World</li>
                    <li>屏幕绘制线条动画</li>
                    <li>按键控制屏幕直线转动</li>
                    <li>按键控制颜色切换</li>
                    <li>计步器</li>
                    <li>计步器 + LED 灯屏</li>
                    <li>使用蓝牙发送数据</li>
                    <li>屏幕显示蓝牙接收的数据</li>
                </ul>
            </div>
            <div>
                <div>IoT 模块联网案例</div>
                <i class="downboxdown1"></i>
                <ul class="Hardware2 HarxA1 HarxA1_last" style="top: calc(50% - 50px);">
                    <li>按键发送光照数据至 CocoCloud</li>
                    <li>按键发送环境数据至 IFTTT</li>
                    <li>按键获取光照数据并根据条件亮灯</li>
                    <li>定时发送环境数据至 CocoCloud</li>
                    <li>定时接收环境数据并根据条件亮灯</li>
                    <li>建立 WiFi 热点并显示连接设备数量</li>
                    <li style="display: none;">局域网环境数据存储 - 服务器端</li>
                    <li style="display: none;">局域网环境数据获取 - 客户端</li>
                    <li>连接 WiFi 网络</li>
                    <li style="display: none;">模块间按钮状态存储 - 服务端</li>
                    <li style="display: none;">模块间按钮状态接收 - 客户端</li>
                    <li style="display: none;">模块间进行 WebSocket 实时通信 - 发送端</li>
                    <li style="display: none;">模块间进行 WebSocket 实时通信 - 接收端</li>
                    <li>同步网络时间</li>
                    <li>数字手表显示实时时间</li>
                </ul>
            </div>
            <div>
                <div>AI 模块机器学习案例</div>
                <i class="downboxdown1"></i>
                <ul class="Hardware2 HarxA1">
                    <li>人脸辨识智能门</li>
                    <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="downboxdown1"></i>
                <ul class="Hardware2 HarxA1" style="top: calc(50% - 80px)">
                    <li>第一場-路標識別(香港標識)</li>
                    <li>第二場-巡線（雙線）</li>
                    <li>第二場-巡線（單線-靠左行駛）</li>
                    <li>第一場-路標識別(香港標識)</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- <iframe id="web" name="web" src="//x.cocorobo.cn/web.html" style="display: none"></iframe> -->

    <!-- 案例modal -->
    <div id="select_Example_modal" class="modal select_Example_modal modal_closes">
        <div class="modal-content" style="background-color: white;height: 100%;">
            <span class="modal_close" style="padding: 5px;right: 15px;top: 10px;">
                <i class="small material-icons" style="font-size: 1.5rem;">close</i>
            </span>
            <h4 class="select_Example_title translatable_select_Example">Example</h4>
            <!-- <div id="cloud_askLogin"></div> -->
            <div id="select_ExampleArea" class="cloud-file" style="background-color: white;height: 90%;">
                <div class="examplate_style">
                    <div class="container-middle">
                        <div id="item" style="display: flex;flex-direction: column;">
                            <div class="con" style="position: relative;">
                                <ul style="display: flex;flex-direction: column;">
                                    <li class="container-top-active translatable_basic_use">基础使用</li>
                                    <li class="container-top-noactive translatable_ExtendedFunction">媒体处理</li>
                                    <li class="container-top-noactive translatable_AI">AI 智能</li>
                                    <li class="container-top-noactive translatable_catIoTService">物联网</li>
                                    <li class="container-top-noactive translatable_Expand">扩展</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="container-middle-1">
                        <div id="item_1" style="display: flex;flex-direction: column;">
                            <div class="con" style="display: flex;flex-direction: column;position: relative;">
                                <ul style="display: flex;flex-direction: column;">
                                    <li class="container-top-active arrow_active translatable_basic_use">基础使用</li>
                                    <li class="container-top-noactive arrow translatable_screen_module">屏幕模块</li>
                                    <li class="container-top-noactive arrow translatable_catCamera">摄像头</li>
                                    <li class="container-top-noactive arrow translatable_catSensor">传感器</li>
                                    <li class="container-top-noactive arrow translatable_serialcomm_print">串口打印</li>
                                    <li class="container-top-noactive arrow translatable_catComms">串口通讯</li>
                                    <li class="container-top-noactive arrow translatable_basic_power">动力</li>
                                </ul>
                            </div>
                            <div class="con" style="display: none; position: relative;">
                                <ul style="display: flex;flex-direction: column;">
                                    <li class="container-top-active translatable_catImageProcess">图形处理</li>
                                    <li class="container-top-noactive arrow translatable_catAudio">音频处理</li>
                                    <li class="container-top-active translatable_catIV">视频处理</li>
                                </ul>
                            </div>
                            <div class="con" style="display: none; position: relative;">
                                <ul style="display: flex;flex-direction: column;">
                                    <li class="container-top-active translatable_catModels">AI 模型</li>
                                </ul>
                                <ul style="display: flex;flex-direction: column;">
                                    <li class="container-top-active translatable_xunfeiIndetify">在线识别</li>
                                </ul>
                            </div>
                            <div class="con" style="display: none; position: relative;">
                                <ul style="display: flex;flex-direction: column;">
                                    <li class="container-top-active translatable_catBasics">物联网</li>
                                    <li class="container-top-active translatable_catWeb">网络</li>
                                </ul>
                            </div>
                            <div class="con" style="display: none; position: relative;">
                                <ul style="display: flex;flex-direction: column;">
                                    <li class="container-top-active translatable_extended_use">系统</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="container-bottom" id="example">
                        <div class="con" style="position: relative;">
                            <ul style="display: flex;flex-direction: column;">
                                <li class="container-top-noactive" onclick="clickLoadingExample('基础/按钮控制LED.xml')">
                                    <div class="translatable_basis_led">按钮控制LED灯亮灭</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('基础/按键控制RGB灯亮.xml')">
                                    <div class="translatable_basis_RGB">按键控制RGB灯亮</div>
                                </li>
                            </ul>
                        </div>
                        <div class="con" style="display: none;position: relative;">
                            <ul style="display: flex;flex-direction: column;">
                                <li class="container-top-noactive" onclick="clickLoadingExample('屏幕显示hello_world.xml')">
                                    <div class="translatable_select_thwos">屏幕显示Hello World</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('屏幕显示实心矩形.xml')">
                                    <div class="translatable_show_rectangle">屏幕显示实心矩形</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('屏幕加载图片.xml')">
                                    <div class="translatable_show_image">屏幕显示图片</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('竖屏显示矩形.xml')">
                                    <div class="translatable_portrait_screen_rectangle">竖屏显示矩形</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('屏幕/自动切换图片.xml')">
                                    <div class="translatable_switch_pictures">自动切换图片</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('屏幕/按键切换背景色.xml')">
                                    <div class="translatable_switch_background">按键切换背景色</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('屏幕/旋转指定角度.xml')">
                                    <div class="translatable_Angular_rotation">旋转指定角度</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('屏幕/小游戏：漫步者.xml')">
                                    <div class="translatable_Rambler">小游戏：漫步者</div>
                                </li>
                            </ul>
                        </div>
                        <div class="con" style="display: none; position: relative;">
                            <ul style="display: flex;flex-direction: column;">
                                <li class="container-top-noactive" onclick="clickLoadingExample('照相机.xml')">
                                    <div class="translatable_select_MC">照相机</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('图像传输显示电脑.xml')">
                                    <div class="translatable_img_transmission_show">图像传输显示电脑</div>
                                </li>
                            </ul>
                        </div>
                        <div class="con" style="display: none; position: relative;">
                            <ul style="display: flex;flex-direction: column;">
                                <li class="container-top-noactive" onclick="clickLoadingExample('传感器/光照值.xml')">
                                    <div class="translatable_light_value">光照值显示</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('传感器/温湿度.xml')">
                                    <div class="translatable_temperature_and_humidity">温湿度屏幕显示</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('屏幕/贪吃蛇.xml')">
                                    <div class="translatable_select_greedy_snake">贪吃蛇</div>
                                </li>
                                <!-- <li class="container-top-noactive" onclick="clickLoadingExample('传感器/加速度.xml')">
                                    <div class="translatable_acceleration_value">QMI8658 加速度值显示</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('传感器/旋转值.xml')">
                                    <div class="translatable_rotation_value">QMI8658 旋转值显示</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('传感器/倾斜角度.xml')">
                                    <div class="translatable_angle_value">QMI8658 倾斜角度显示</div>
                                </li> -->
                            </ul>
                        </div>
                        <div class="con" style="display: none; position: relative;">
                            <ul style="display: flex;flex-direction: column;">
                                <li class="container-top-noactive" onclick="clickLoadingExample('输出Hello_world.xml')">
                                    <div class="translatable_print_hello_world">输出hello World</div>
                                </li>
                            </ul>
                        </div>

                        <div class="con" style="display: none; position: relative;">
                            <ul style="display: flex;flex-direction: column;">
                                <li class="container-top-noactive" onclick="clickLoadingExample('串口/串口发送数据至其他设备.xml')">
                                    <div class="translatable_serial_comm_fa">串口通信（发）</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('串口/uart_receive.xml')">
                                    <div class="translatable_serial_comm">串口通信（收）</div>
                                </li>
                            </ul>
                        </div>
                        <div class="con" style="display: none; position: relative;">
                            <ul style="display: flex;flex-direction: column;">

                                <li class="container-top-noactive" onclick="clickLoadingExample('动力/舵机程序.xml')">
                                    <div class="translatable_fullRotate">控制舵机</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('动力/电机程序.xml')">
                                    <div class="translatable_motor_rotation">电机旋转</div>
                                </li>
                            </ul>
                        </div>
                        <div class="con" style="display: none; position: relative;">
                            <ul style="display: flex;flex-direction: column;">
                                <li class="container-top-noactive" onclick="clickLoadingExample('图像处理/区域颜色分析.xml')">
                                    <div class="translatable_area_color_analysis">区域颜色分析</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('图像处理/循线-单.xml')">
                                    <div class="translatable_ai_tpl2">循线（单线）</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('图像处理/二维码识别.xml')">
                                    <div class="translatable_QR_code_recognition">二维码识别</div>
                                </li>
                        </div>
                        <div class="con" style="display: none;position: relative;">
                            <ul style="display: flex;flex-direction: column;">
                                <!-- <li class="container-top-noactive" onclick="clickLoadingExample('屏幕绘制直线.xml')">
                                    <div class="translatable_screen_module">屏幕绘制直线</div>
                                </li> -->
                                <li class="container-top-noactive" onclick="clickLoadingExample('luzhiyinpin.xml')">
                                    <div class="translatable_Record_audio">录制音频</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('bofangyinpin.xml')">
                                    <div class="translatable_select_PAF">播放音频</div>
                                </li>
                            </ul>
                        </div>
                        <div class="con" style="display: none; position: relative;">
                            <ul style="display: flex;flex-direction: column;">
                                <li class="container-top-noactive"
                                    onclick="clickLoadingExample('video/play_vidoe.xml')">
                                    <div class="translatable_paly_video">播放视频</div>
                                </li>
                            </ul>
                        </div>
                        <div class="con" style="display: none; position: relative;">
                            <ul style="display: flex;flex-direction: column;">
                                <li class="container-top-noactive" onclick="clickLoadingExample('AI/人脸检测.xml')">
                                    <div class="translatable_basis_face_recognition">人脸检测</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('AI/人脸采集.xml')">
                                    <div class="translatable_face_collection">人脸识别（采集人脸）</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('AI/人脸识别.xml')">
                                    <div class="translatable_face_recognition">人脸识别（识别人脸）</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('AI/物体检测.xml')">
                                    <div class="translatable_basis_object_recognition">物体检测</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('AI/猜拳手势识别.xml')">
                                    <div class="translatable_Guesswork_recognition">猜拳手势识别</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('AI/实时边缘检测.xml')">
                                    <div class="translatable_edge_detection">实时边缘检测</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('AI/图片边缘检测.xml')">
                                    <div class="translatable_image_edge_detection">图片边缘检测</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('AI/数字识别.xml')">
                                    <div class="translatable_digital_recognition">数字识别</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('AI/自学习.xml')">
                                    <div class="translatable_self_learning">自学习分类</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('AI/自定义训练识别.xml')">
                                    <div class="translatable_custom_training">自定义训练识别</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('AI/语音录制识别.xml')">
                                    <div class="translatable_recorded_voice_command">语音录制识别</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('AI/语音录制（识别）.xml')">
                                    <div class="translatable_AI_speech_1">语音录制识别</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('AI/车牌识别.xml')">
                                    <div class="translatable_basis_card_recognition">车牌识别</div>
                                </li>
                                <li class="container-top-noactive"
                                    onclick="clickLoadingExample('AI/numpyMnist训练模型.xml')">
                                    <div class="translatable_numpy_mnist_train_model">numpy + mnist 训练模型</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('AI/numpyMnist识别.xml')">
                                    <div class="translatable_numpy_mnist_result">numpy + mnist 识别</div>
                                </li>
                            </ul>
                        </div>
                        <div class="con" style="display: none; position: relative;">
                            <ul style="display: flex;flex-direction: column;">
                                <li class="container-top-noactive" onclick="clickLoadingExample('讯飞/在线人脸检测.xml')">
                                    <div class="translatable_FaceIndetify">在线人脸识别</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('讯飞/在线语音识别.xml')">
                                    <div class="translatable_VoiceIndetify">在线语音识别</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('讯飞/在线文本转语音并播放.xml')">
                                    <div class="translatable_textConVoice">文本转语音并播放</div>
                                </li>
                                <!-- <li class="container-top-noactive" onclick="clickLoadingExample('讯飞/车牌识别.xml')">
                                    <div class="translatable_card_indetify">车牌识别</div>
                                </li> -->
                                <li class="container-top-noactive" onclick="clickLoadingExample('讯飞/机器翻译.xml')">
                                    <div class="translatable_machine_translation">机器翻译</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('讯飞/文字识别.xml')">
                                    <div class="translatable_Handwritten_texts">在线文字识别</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('讯飞/公式识别.xml')">
                                    <div class="translatable_formula">公式识别</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('讯飞/情绪识别.xml')">
                                    <div class="translatable_AI_emotion">情绪识别</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('讯飞/手势识别.xml')">
                                    <div class="translatable_gesturesTitle">手势识别</div>
                                </li>
                            </ul>
                        </div>
                        <div class="con" style="display: none; position: relative;">
                            <ul style="display: flex;flex-direction: column;">
                                <li class="container-top-noactive" onclick="clickLoadingExample('讯飞/设置wifi联网.xml')">
                                    <div class="translatable_set_Wifi">设置wifi联网</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('web/同步网络时间.xml')">
                                    <div class="translatable_select_snt">同步网络时间</div>
                                </li>
                            </ul>
                        </div>
                        <div class="con" style="display: none; position: relative;">
                            <ul style="display: flex;flex-direction: column;">
                                <li class="container-top-noactive" onclick="clickLoadingExample('web/获取网络天气.xml')">
                                    <div class="translatable_get_web_weather">获取网络天气</div>
                                </li>
                                <li class="container-top-noactive" onclick="clickLoadingExample('web/云端发送光线值.xml')">
                                    <div class="translatable_serial_comm_iot_send">云端发送光线值</div>
                                </li>
                            </ul>
                        </div>
                        <div class="con" style="display: none; position: relative;">
                            <ul style="display: flex;flex-direction: column;">
                                <li class="container-top-noactive" onclick="clickLoadingExample('扩展/LED灯带.xml')">
                                    <div class="translatable_catLEDStrip">LED灯带</div>
                                </li>
                                <!-- <li class="container-top-noactive" onclick="clickLoadingExample('讯飞/在线物体识别.xml')">
                                    <div class="translatable_online_object_indetify">物体识别</div>
                                </li> -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- webadb 文件 -->
    <div id="webadbIframeFile" class="modal modal_closes">
        <span class="modal_close" style="padding: 5px;position: absolute;right: 0;cursor: pointer;"><i
                class="small material-icons" style="font-size: 1.5rem;">close</i></span>
        <div id="file_manager_back" onclick="document.getElementById('file_manager').contentWindow.history.back()"
            style="padding: 5px;position: absolute;left: -2px;top: 7px;cursor: pointer;width: 35px;"><i
                class="small material-icons" style="font-size: 1.5rem;">arrow_back</i></div>
        <iframe id="file_manager" frameborder="0" style="width: 100%;height: 100%;" scrolling="no"
            allow="camera *; fullscreen *;fullscreen 'src'"></iframe>
    </div>
    <!-- 模型下载modal -->
    <div id="select_Model_download_modal" class="modal select_Example_modal modal_closes">
        <span class="modal_close" style="padding: 22px;position: absolute;right: 0;cursor: pointer;"><i
                class="small material-icons" style="font-size: 1.5rem;"
                onclick="$('#select_Model_download_modal').modal('close')">close</i></span>
        <div id="TM_login_Model_download_modal" style="display: none;"></div>
        <div id="Model_download_modal" class="modal-content" style="background-color: white;height: 95%;padding: 30px;">
            <!-- <span class="modal_close" style="padding: 5px;right: 15px;top: 20px;">
                <i class="small material-icons" style="font-size: 1.5rem;">close</i>
            </span> -->
            <h4 class="select_Example_title translatable_model_download" style="width: 80%;">Model Download</h4>
            <!-- <div id="cloud_askLogin"></div> -->
            <div id="select_ExampleArea" class="cloud-file"
                style="background-color: white;height: 90%;overflow-y: auto;overflow-x: hidden;margin-top: 40px;">
                <div
                    style="margin: 40px auto 0 auto;height: 100%;font-size: 16px;background-color: white;flex-direction: row;display: flex;margin-top: 0;">
                    <div style="display: flex;flex-direction: column;width: 98%;">
                        <div
                            style="display: flex;flex-direction: row;justify-content: space-between;min-height: 400px;">
                            <div class="model_download_modal_column"
                                style="width: 23%;height: 400px;background: #E6F3FF;border-radius: 20px;">
                                <div class="modelDownloadItemImg"
                                    style="background: url('./images/model/AI训练平台.jpg') no-repeat center center;position: relative;">
                                    <!-- <div
                                        style="background: #6689FC;border-radius: 0px 20px 0px 20px;position: absolute;right: 0;padding: 7px;">
                                        <span
                                            style="font-size: 15px;font-weight: bold;color: #FFFFFF;line-height: 16px;"
                                            class="translatable_model_download_new">最新上线</span>
                                    </div> -->
                                </div>
                                <div style="display: flex;flex-direction: row;justify-content: space-between;">
                                    <div class="modelDownloadItemTitle translatable_model_download_AI_training">
                                        AI 训练平台</div>
                                    <div class="vision_category"
                                        style="display: flex;flex-direction: column;justify-content: center;height: 72px;">
                                        <div class="modelDownloadItemCategory">
                                            <span
                                                class="modelDownloadItemCategoryTitle translatable_model_download_vision">视觉</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="modelDownloadItemDesc translatable_model_download_AI_training_desc">
                                    使用可可乐博训练平台可以帮助您处理数据集，引导您一步步的开始模型训练。
                                </div>

                                <div style="text-align: center;width: 100%;">
                                    translatable <button class="modelDownloadItemBtn"
                                        onclick="enterTraining('//beta.model-training.cocorobo.hk')">
                                        <span
                                            class="modelDownloadItemBtntext translatable_app_center_enter_button">进入</span>
                                    </button>
                                </div>
                            </div>
                            <div class="model_download_modal_column"
                                style="width: 23%;height: 400px;background: #E6F3FF;border-radius: 20px;">
                                <div class="modelDownloadItemImg"
                                    style="background: url('./images/model/AI训练平台.jpg') no-repeat center center;position: relative;">
                                    <!-- <div
                                        style="background: #6689FC;border-radius: 0px 20px 0px 20px;position: absolute;right: 0;padding: 7px;">
                                        <span
                                            style="font-size: 15px;font-weight: bold;color: #FFFFFF;line-height: 16px;"
                                            class="translatable_model_download_new">最新上线</span>
                                    </div> -->
                                </div>
                                <div style="display: flex;flex-direction: row;justify-content: space-between;">
                                    <div class="modelDownloadItemTitle translatable_model_download_AI_training">
                                        AI 训练平台</div>
                                    <div class="vision_category"
                                        style="display: flex;flex-direction: column;justify-content: center;height: 72px;">
                                        <div class="modelDownloadItemCategory">
                                            <span
                                                class="modelDownloadItemCategoryTitle translatable_model_download_vision">视觉</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="modelDownloadItemDesc translatable_model_download_AI_training_desc">
                                    使用可可乐博训练平台可以帮助您处理数据集，引导您一步步的开始模型训练。
                                </div>

                                <div style="text-align: center;width: 100%;">
                                    <button class="modelDownloadItemBtn"
                                        onclick="enterTraining('//xunlian.cocorobo.cn')">
                                        <span
                                            class="modelDownloadItemBtntext translatable_app_center_enter_button">进入</span>
                                    </button>
                                </div>
                            </div>
                            <div class="model_download_modal_column"
                                style="width: 23%;height: 400px;background: #E6F3FF;border-radius: 20px;">
                                <div class="modelDownloadItemImg"
                                    style="background: url('./images/model/手势识别追踪模型.jpg') no-repeat center center;position: relative;">
                                    <div
                                        style="background: #6689FC;border-radius: 0px 20px 0px 20px;position: absolute;right: 0;padding: 7px;">
                                        <span
                                            style="font-size: 15px;font-weight: bold;color: #FFFFFF;line-height: 16px;"
                                            class="translatable_model_download_new">最新上线</span>
                                    </div>
                                </div>

                                <div style="display: flex;flex-direction: row;justify-content: space-between;">
                                    <div class="modelDownloadItemTitle translatable_model_download_gesture_recognition">
                                        手势识别追踪模型</div>
                                    <div class="vision_category"
                                        style="display: flex;flex-direction: column;justify-content: center;height: 72px;">
                                        <div class="modelDownloadItemCategory">
                                            <span
                                                class="modelDownloadItemCategoryTitle translatable_model_download_vision">视觉</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="modelDownloadItemDesc translatable_model_download_gesture_recognition_desc">
                                    识别人的不同手势，并追踪人手相对于屏幕所处的位置
                                </div>

                                <div style="text-align: center;width: 100%;">
                                    <button class="modelDownloadbtndisabled" disabled>
                                        <span class="modelDownloadItemBtntext translatable_download_file">下载</span>
                                    </button>
                                </div>
                            </div>
                            <div class="model_download_modal_column"
                                style="width: 23%;height: 400px;background: #E6F3FF;border-radius: 20px;">
                                <div class="modelDownloadItemImg"
                                    style="background: url('./images/model/人脸识别追踪模型.jpg') no-repeat center center;">
                                </div>

                                <div style="display: flex;flex-direction: row;justify-content: space-between;">
                                    <div class="modelDownloadItemTitle translatable_model_download_face_recognition">
                                        手势识别追踪模型</div>
                                    <div class="vision_category"
                                        style="display: flex;flex-direction: column;justify-content: center;height: 72px;">
                                        <div class="modelDownloadItemCategory">
                                            <span
                                                class="modelDownloadItemCategoryTitle translatable_model_download_vision">视觉</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="modelDownloadItemDesc translatable_model_download_face_recognition_desc">
                                    识别人的不同手势，并追踪人手相对于屏幕所处的位置
                                </div>

                                <div style="text-align: center;width: 100%;">
                                    <button class="modelDownloadItemBtn"
                                        onclick="downloadModel('./kmodels/face-recognition.kmodel')">
                                        <span class="modelDownloadItemBtntext translatable_download_file">下载</span>
                                    </button>
                                </div>
                            </div>
                            <div class="model_download_modal_column"
                                style="width: 23%;height: 400px;background: #E6F3FF;border-radius: 20px;">
                                <div class="modelDownloadItemImg"
                                    style="background: url('./images/model/物体识别追踪模型.jpg') no-repeat center center;">
                                </div>

                                <div style="display: flex;flex-direction: row;justify-content: space-between;">
                                    <div class="modelDownloadItemTitle translatable_model_download_object_recognition">
                                        手势识别追踪模型</div>
                                    <div class="vision_category"
                                        style="display: flex;flex-direction: column;justify-content: center;height: 72px;">
                                        <div class="modelDownloadItemCategory">
                                            <span
                                                class="modelDownloadItemCategoryTitle translatable_model_download_vision">视觉</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="modelDownloadItemDesc translatable_model_download_object_recognition_desc">
                                    识别人的不同手势，并追踪人手相对于屏幕所处的位置
                                </div>

                                <div style="text-align: center;width: 100%;">
                                    <button class="modelDownloadItemBtn"
                                        onclick="downloadModel('./kmodels/tinyyolo_v2_20class.kmodel')">
                                        <span class="modelDownloadItemBtntext translatable_download_file">下载</span>
                                    </button>
                                </div>
                            </div>

                        </div>
                        <div
                            style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 40px;min-height: 400px;">
                            <div class="model_download_modal_column"
                                style="width: 23%;height: 400px;background: #E6F3FF;border-radius: 20px;">
                                <div class="modelDownloadItemImg"
                                    style="background: url('./images/model/普通话识别模型.jpg') no-repeat center center;">
                                </div>

                                <div style="display: flex;flex-direction: row;justify-content: space-between;">
                                    <div
                                        class="modelDownloadItemTitle translatable_model_download_mandarin_recognition">
                                        手势识别追踪模型</div>
                                    <div class="vision_category"
                                        style="display: flex;flex-direction: column;justify-content: center;height: 72px;">
                                        <div class="modelDownloadItemCategory">
                                            <span
                                                class="modelDownloadItemCategoryTitle translatable_model_download_voice">视觉</span>
                                        </div>
                                    </div>
                                </div>
                                <div
                                    class="modelDownloadItemDesc translatable_model_download_mandarin_recognition_desc">
                                    识别人的不同手势，并追踪人手相对于屏幕所处的位置
                                </div>

                                <div style="text-align: center;width: 100%;">
                                    <button class="modelDownloadbtndisabled" disabled>
                                        <span class="modelDownloadItemBtntext translatable_download_file">下载</span>
                                    </button>
                                </div>
                            </div>
                            <div class="model_download_modal_column"
                                style="width: 23%;height: 400px;background: #E6F3FF;border-radius: 20px;">
                                <div class="modelDownloadItemImg"
                                    style="background: url('./images/model/交通路标识别模型.jpg') no-repeat center center;">
                                </div>

                                <div style="display: flex;flex-direction: row;justify-content: space-between;">
                                    <div
                                        class="modelDownloadItemTitle translatable_model_download_traffic_sign_recognition">
                                        手势识别追踪模型</div>
                                    <div class="vision_category"
                                        style="display: flex;flex-direction: column;justify-content: center;height: 72px;">
                                        <div class="modelDownloadItemCategory">
                                            <span
                                                class="modelDownloadItemCategoryTitle translatable_model_download_vision">视觉</span>
                                        </div>
                                    </div>
                                </div>
                                <div
                                    class="modelDownloadItemDesc translatable_model_download_traffic_sign_recognition_desc">
                                    识别人的不同手势，并追踪人手相对于屏幕所处的位置
                                </div>

                                <div style="text-align: center;width: 100%;">
                                    <button class="modelDownloadbtndisabled" disabled>
                                        <span class="modelDownloadItemBtntext translatable_download_file">下载</span>
                                    </button>
                                </div>
                            </div>
                            <div class="model_download_modal_column"
                                style="width: 23%;height: 400px;background: #E6F3FF;border-radius: 20px;">
                                <div class="modelDownloadItemImg"
                                    style="background: url('./images/model/垃圾分类识别模型.jpg') no-repeat center center;">
                                </div>

                                <div style="display: flex;flex-direction: row;justify-content: space-between;">
                                    <div
                                        class="modelDownloadItemTitle translatable_model_download_refuse_classification_recognition">
                                        手势识别追踪模型</div>
                                    <div class="vision_category"
                                        style="display: flex;flex-direction: column;justify-content: center;height: 72px;">
                                        <div class="modelDownloadItemCategory">
                                            <span
                                                class="modelDownloadItemCategoryTitle translatable_model_download_vision">视觉</span>
                                        </div>
                                    </div>
                                </div>
                                <div
                                    class="modelDownloadItemDesc translatable_model_download_refuse_classification_recognition_desc">
                                    识别人的不同手势，并追踪人手相对于屏幕所处的位置
                                </div>

                                <div style="text-align: center;width: 100%;">
                                    <button class="modelDownloadbtndisabled" disabled>
                                        <span class="modelDownloadItemBtntext translatable_download_file">下载</span>
                                    </button>
                                </div>
                            </div>
                            <div class="model_download_modal_column"
                                style="width: 23%;height: 400px;background: #E6F3FF;border-radius: 20px;">
                                <div class="modelDownloadItemImg"
                                    style="background: url('./images/model/手写数字识别模型.jpg') no-repeat center center;">
                                </div>

                                <div style="display: flex;flex-direction: row;justify-content: space-between;">
                                    <div
                                        class="modelDownloadItemTitle translatable_model_download_handwritten_recognition">
                                        手势识别追踪模型</div>
                                    <div class="vision_category"
                                        style="display: flex;flex-direction: column;justify-content: center;height: 72px;">
                                        <div class="modelDownloadItemCategory">
                                            <span
                                                class="modelDownloadItemCategoryTitle translatable_model_download_vision">视觉</span>
                                        </div>
                                    </div>
                                </div>
                                <div
                                    class="modelDownloadItemDesc translatable_model_download_handwritten_recognition_desc">
                                    识别人的不同手势，并追踪人手相对于屏幕所处的位置
                                </div>

                                <div style="text-align: center;width: 100%;">
                                    <button class="modelDownloadbtndisabled" disabled>
                                        <span class="modelDownloadItemBtntext translatable_download_file">下载</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="loadModal" class="modal loadModals_Example_modal modal_closes">
        <div class="modal-content update-new" style="display: block;height: 100%;">
            <h4 style="display: inline-block;" class="select_load_title translatable_LoadingH4">最新更新及注意事项
            </h4>
            <span style="font-size: 2rem;font-weight: bold;" class="updateTime"></span>
            <span class="modal_close" style="padding: 5px;right: 15px;top: 10px;">
                <i class="small material-icons" style="font-size: 1.5rem;"
                    onclick="$('#loadModal').modal('close')">close</i>
            </span>
            <div style="display: flex;justify-content: space-between;height: calc(100% - 100px);">
                <!-- <p>更新内容</p> -->
                <div class="loadContent left-bottom-radius">
                    <h6 class="UpdateContent translatable_UpdateContent">更新内容</h6>
                    <ul class="updateConten">
                        <li>
                            积木
                            <ul id="blockLis" class="updateContent">
                            </ul>
                        </li>
                        <li>样例
                            <ul id="exampleLis" class="updateContent">
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- <p>更新注意事项</p> -->
                <div class="loadContent right-bottom-radius">
                    <h6 class="attention-Content translatable_attentionContent">注意事项</h6>
                    <ul class="updateConten" id="noteLis">

                    </ul>
                </div>
            </div>
            <div style="padding:1% 0;text-align: right;">
                <span class="btn blue" onclick="switchUpdate('2')">历史更新</span>
            </div>
        </div>
        <div class="modal-content update-old" style="display: none;height: 100%;">
            <h4 class="select_load_title translatable_LoadingH4history">历史更新记录
            </h4>
            <span class="updateTime"></span>
            <span class="modal_close" style="padding: 5px;right: 15px;top: 10px;">
                <i class="small material-icons" style="font-size: 1.5rem;"
                    onclick="$('#loadModal').modal('close')">close</i>
            </span>
            <div style="display: flex;justify-content: space-between;height: calc(100% - 100px);">
                <!-- <p>更新内容</p> -->
                <div class="loadContent">
                    <h6 class="UpdateContent translatable_UpdateContent">更新内容</h6>
                    <ul class="updateConten" id="leftUpdateOld">
                    </ul>
                </div>
                <!-- <p>更新注意事项</p> -->
                <div class="loadContent">
                    <h6 class="attention-Content translatable_attentionContent">注意事项</h6>
                    <ul class="updateConten" id="noteLisOld">

                    </ul>
                </div>
            </div>
            <div style="padding:1% 0;text-align: right;">
                <span class="btn blue" onclick="switchUpdate('1')">最新更新</span>
            </div>
        </div>
    </div>
</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("TM_login_Model_download_modal");
                $('#TM_login_Model_download_modal').children().css("height", "820px");
                $('#TM_login_Model_download_modal').children().css("margin-top", "-225px");
                appendIframe("TM_login_object");
                $('#TM_login_object').children().css("height", "820px");
                appendIframe("TM_login_posenet");
                $('#TM_login_posenet').children().css("height", "820px");
                appendIframe("TM_posenet_login");
                $('#TM_posenet_login').children().css("height", "820px");
                appendIframe("before_login");
                appendIframe("cloud_askLogin");
                appendIframe("TM_login_webcam_capture_modal");
                $('#TM_login_webcam_capture_modal').children().css("width", "820px");
                $('#TM_login_webcam_capture_modal').children().css("height", "820px");
                appendIframe("TM_login_gesture_recog_modal");
                $('#TM_login_gesture_recog_modal').children().css("width", "820px");
                $('#TM_login_gesture_recog_modal').children().css("height", "820px");
                appendIframe("TM_login_voice_input_modal");
                $('#TM_login_voice_input_modal').children().css("width", "820px");
                $('#TM_login_voice_input_modal').children().css("height", "820px");
                appendIframe("TM_center_game");
                $('#TM_center_game').children().css("margin-top", "-300px");
                $('#TM_center_game').children().css("height", "820px");
                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>