howard
/
Agent


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>写生油画 - 多模态特征可视化</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            overflow: hidden;
        }

        header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px;
            text-align: center;
        }

        header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }

        header p {
            font-size: 1.1em;
            opacity: 0.9;
        }

        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            padding: 30px 40px;
            background: #f8f9fa;
            border-bottom: 2px solid #e9ecef;
        }

        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-number {
            font-size: 2.5em;
            font-weight: bold;
            color: #667eea;
            display: block;
        }

        .stat-label {
            color: #666;
            font-size: 0.9em;
            margin-top: 5px;
        }

        .content {
            padding: 40px;
        }

        .section {
            margin-bottom: 50px;
        }

        .section-title {
            font-size: 2em;
            color: #667eea;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 3px solid #667eea;
        }

        .images-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .image-card {
            background: #f8f9fa;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: all 0.3s;
            cursor: pointer;
        }

        .image-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }

        .image-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }

        .image-info {
            padding: 15px;
        }

        .image-name {
            font-weight: bold;
            font-size: 1.1em;
            color: #333;
            margin-bottom: 8px;
        }

        .image-clusters {
            font-size: 0.85em;
            color: #666;
        }

        .cluster-tag {
            display: inline-block;
            background: #e7f3ff;
            color: #0066cc;
            padding: 3px 8px;
            border-radius: 4px;
            margin: 2px;
            font-size: 0.85em;
        }

        .dimensions-grid {
            display: grid;
            gap: 30px;
            margin-top: 30px;
        }

        .dimension-card {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .dimension-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            cursor: pointer;
            user-select: none;
        }

        .dimension-title {
            font-size: 1.5em;
            font-weight: bold;
            color: #667eea;
        }

        .toggle-btn {
            background: #667eea;
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.9em;
            transition: all 0.3s;
        }

        .toggle-btn:hover {
            background: #5568d3;
        }

        .dimension-description {
            background: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            line-height: 1.8;
        }

        .dimension-meta {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }

        .meta-item {
            background: white;
            padding: 15px;
            border-radius: 8px;
        }

        .meta-label {
            font-weight: bold;
            color: #667eea;
            font-size: 0.9em;
            margin-bottom: 5px;
        }

        .meta-value {
            color: #333;
            font-size: 0.95em;
        }

        .dimension-content {
            display: block;
            margin-top: 20px;
        }

        .dimension-content.active {
            display: block;
        }

        .feature-images-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .feature-image-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            cursor: pointer;
            transition: all 0.3s;
        }

        .feature-image-card:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        }

        .feature-image-card img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            display: block;
        }

        .feature-image-label {
            padding: 10px;
            text-align: center;
            font-size: 0.9em;
            font-weight: bold;
            color: #333;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.9);
            justify-content: center;
            align-items: center;
        }

        .modal.active {
            display: flex;
        }

        .modal-content {
            max-width: 90%;
            max-height: 90%;
            position: relative;
        }

        .modal-content-wrapper {
            max-width: 95%;
            max-height: 90vh;
            position: relative;
        }

        .modal-images {
            display: flex;
            gap: 20px;
            align-items: flex-start;
            justify-content: center;
            flex-wrap: wrap;
        }

        .modal-image-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 45%;
            min-width: 400px;
        }

        .modal-image-title {
            color: white;
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 10px;
            text-align: center;
        }

        .modal-image-container img {
            max-width: 100%;
            max-height: 80vh;
            object-fit: contain;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        }

        #featureImageContainer.hidden {
            display: none;
        }

        @media (max-width: 1200px) {
            .modal-image-container {
                max-width: 90%;
                min-width: 300px;
            }
        }


        .modal-content img {
            max-width: 100%;
            max-height: 90vh;
            object-fit: contain;
            border-radius: 10px;
        }

        .modal-close {
            position: absolute;
            top: -40px;
            right: 0;
            color: white;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
            background: none;
            border: none;
            padding: 0 10px;
        }

        .modal-close:hover {
            color: #667eea;
        }

        .color-palette-display {
            display: flex;
            gap: 5px;
            margin-top: 10px;
            height: 40px;
        }

        .color-block {
            flex: 1;
            border-radius: 4px;
            position: relative;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .color-block:hover {
            transform: scale(1.1);
        }

        .color-block::after {
            content: attr(data-hex);
            position: absolute;
            bottom: -25px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.7em;
            color: #666;
            white-space: nowrap;
        }

        .hsv-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-top: 15px;
        }

        .hsv-stat {
            background: white;
            padding: 10px;
            border-radius: 6px;
            text-align: center;
        }

        .hsv-stat-label {
            font-size: 0.8em;
            color: #666;
            margin-bottom: 5px;
        }

        .hsv-stat-value {
            font-size: 1.2em;
            font-weight: bold;
            color: #667eea;
        }

        .cluster-info {
            background: #e7f3ff;
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
        }

        .cluster-info h4 {
            color: #0066cc;
            margin-bottom: 10px;
        }

        .cluster-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .cluster-badge {
            background: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.9em;
            color: #333;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .detail-toggle {
            background: white;
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
            cursor: pointer;
            user-select: none;
            transition: all 0.3s;
            border: 2px solid #e9ecef;
        }

        .detail-toggle:hover {
            border-color: #667eea;
            background: #f8f9fa;
        }

        .detail-toggle-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            color: #667eea;
        }

        .detail-toggle-icon {
            font-size: 1.2em;
            transition: transform 0.3s;
        }

        .detail-toggle-icon.expanded {
            transform: rotate(180deg);
        }

        .detail-toggle-content {
            display: none;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #e9ecef;
        }

        .detail-toggle-content.active {
            display: block;
        }

        .detail-section {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 10px;
        }

        .detail-section h4 {
            color: #667eea;
            margin-bottom: 10px;
            font-size: 1em;
        }

        .detail-section ul {
            margin: 0;
            padding-left: 20px;
            line-height: 1.8;
        }

        .detail-section p {
            margin: 0;
            line-height: 1.8;
        }

        .io-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 20px;
        }

        .input-box, .output-box {
            background: white;
            border: 2px solid #e9ecef;
            border-radius: 12px;
            padding: 20px;
        }

        .input-box {
            border-color: #667eea;
        }

        .output-box {
            border-color: #28a745;
        }

        .box-title {
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid;
        }

        .input-box .box-title {
            color: #667eea;
            border-bottom-color: #667eea;
        }

        .output-box .box-title {
            color: #28a745;
            border-bottom-color: #28a745;
        }

        @media (max-width: 1024px) {
            .io-container {
                grid-template-columns: 1fr;
            }
        }

        .overview-section {
            padding: 40px;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }

        .overview-title {
            font-size: 2em;
            color: #667eea;
            margin-bottom: 30px;
            text-align: center;
            font-weight: bold;
        }

        .overview-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 20px;
        }

        .overview-box {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .overview-box h3 {
            color: #667eea;
            font-size: 1.3em;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #667eea;
        }

        .cluster-overview-item {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 12px;
            border-left: 4px solid #667eea;
        }

        .cluster-overview-title {
            font-weight: bold;
            color: #333;
            font-size: 1.05em;
            margin-bottom: 5px;
        }

        .cluster-overview-meta {
            font-size: 0.9em;
            color: #666;
        }

        .cluster-overview-meta span {
            display: inline-block;
            margin-right: 15px;
        }

        .dimension-overview-item {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 12px;
            border-left: 4px solid #28a745;
        }

        .dimension-overview-title {
            font-weight: bold;
            color: #333;
            font-size: 1.05em;
            margin-bottom: 8px;
        }

        .dimension-overview-clusters {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 8px;
        }

        .mini-cluster-tag {
            background: #e7f3ff;
            color: #0066cc;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.85em;
        }

        @media (max-width: 1024px) {
            .overview-grid {
                grid-template-columns: 1fr;
            }
        }

    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>写生油画 - 多模态特征可视化</h1>
            <p>从图片中提取的可逆特征空间分析</p>
        </header>

        <div class="stats">
            <div class="stat-card">
                <span class="stat-number">9</span>
                <span class="stat-label">原始图片</span>
            </div>
            <div class="stat-card">
                <span class="stat-number">7</span>
                <span class="stat-label">特征维度</span>
            </div>
            <div class="stat-card">
                <span class="stat-number">6</span>
                <span class="stat-label">亮点聚类</span>
            </div>
            <div class="stat-card">
                <span class="stat-number">63</span>
                <span class="stat-label">特征图片</span>
            </div>
        </div>

        <!-- 总览区域 -->
        <div class="overview-section">
            <h2 class="overview-title">📊 亮点与特征维度总览</h2>
            <div class="overview-grid">
                <!-- 左侧：亮点聚类 -->
                <div class="overview-box">
                    <h3>🎯 亮点聚类（6个）</h3>
                    <div id="clusterOverview"></div>
                </div>

                <!-- 右侧：特征维度 -->
                <div class="overview-box">
                    <h3>🎨 特征维度（7个）</h3>
                    <div id="dimensionOverview"></div>
                </div>
            </div>
        </div>

        <div class="content">
            <!-- 原始图片展示 -->
            <div class="section">
                <h2 class="section-title">📷 原始图片</h2>
                <div class="images-grid" id="originalImages"></div>
            </div>

            <!-- 特征维度展示 -->
            <div class="section">
                <h2 class="section-title">🎨 多模态特征维度</h2>
                <div class="dimensions-grid" id="dimensionsContainer"></div>
            </div>
        </div>
    </div>

    <!-- 图片放大模态框 -->
    <div class="modal" id="imageModal">
        <div class="modal-content-wrapper">
            <button class="modal-close" onclick="closeModal()">&times;</button>
            <div class="modal-images">
                <div class="modal-image-container">
                    <div class="modal-image-title">原图</div>
                    <img id="modalOriginalImage" src="" alt="原图">
                </div>
                <div class="modal-image-container" id="featureImageContainer">
                    <div class="modal-image-title">特征图</div>
                    <img id="modalFeatureImage" src="" alt="特征图">
                </div>
            </div>
        </div>
    </div>

    <script>
        // 数据加载
        const mappingData = {
  "post_name": "写生油画",
  "total_images": 9,
  "total_features": 7,
  "feature_dimensions": [
    "openpose_skeleton",
    "depth_map",
    "lineart_edge",
    "color_palette",
    "bokeh_mask",
    "semantic_segmentation",
    "color_distribution"
  ],
  "cluster_overview": {
    "cluster_1": {
      "聚类主题": "优雅的白裙画者",
      "亮点类型": "实质",
      "图片数量": 9,
      "图片列表": [
        "img_1",
        "img_2",
        "img_3",
        "img_4",
        "img_5",
        "img_6",
        "img_7",
        "img_8",
        "img_9"
      ],
      "对应特征维度": [
        "openpose_skeleton",
        "lineart_edge",
        "semantic_segmentation"
      ]
    },
    "cluster_2": {
      "聚类主题": "充满艺术气息的写生道具",
      "亮点类型": "实质",
      "图片数量": 7,
      "图片列表": [
        "img_1",
        "img_4",
        "img_5",
        "img_6",
        "img_7",
        "img_8",
        "img_9"
      ],
      "对应特征维度": [
        "lineart_edge",
        "color_palette"
      ]
    },
    "cluster_3": {
      "聚类主题": "清新自然的绿白配色",
      "亮点类型": "形式",
      "图片数量": 5,
      "图片列表": [
        "img_1",
        "img_4",
        "img_5",
        "img_7",
        "img_8"
      ],
      "对应特征维度": [
        "color_palette",
        "semantic_segmentation",
        "color_distribution"
      ]
    },
    "cluster_4": {
      "聚类主题": "虚实呼应的画中画结构",
      "亮点类型": "形式",
      "图片数量": 3,
      "图片列表": [
        "img_1",
        "img_2",
        "img_3"
      ],
      "对应特征维度": [
        "depth_map",
        "bokeh_mask",
        "color_distribution"
      ]
    },
    "cluster_5": {
      "聚类主题": "唯美梦幻的光影氛围",
      "亮点类型": "形式",
      "图片数量": 3,
      "图片列表": [
        "img_2",
        "img_3",
        "img_7"
      ],
      "对应特征维度": [
        "depth_map",
        "semantic_segmentation"
      ]
    },
    "cluster_6": {
      "聚类主题": "巧妙的摄影构图视角",
      "亮点类型": "形式",
      "图片数量": 4,
      "图片列表": [
        "img_4",
        "img_5",
        "img_6",
        "img_9"
      ],
      "对应特征维度": [
        "openpose_skeleton"
      ]
    }
  },
  "image_overview": {
    "img_1": {
      "active_clusters": {
        "cluster_1": {
          "聚类主题": "优雅的白裙画者",
          "亮点类型": "实质",
          "合并结论": "优雅的白裙侧背影"
        },
        "cluster_2": {
          "聚类主题": "充满艺术气息的写生道具",
          "亮点类型": "实质",
          "合并结论": "充满艺术气息的写生道具"
        },
        "cluster_3": {
          "聚类主题": "清新自然的绿白配色",
          "亮点类型": "形式",
          "合并结论": "清新治愈的绿白配色"
        },
        "cluster_4": {
          "聚类主题": "虚实呼应的画中画结构",
          "亮点类型": "形式",
          "合并结论": "虚实呼应的画中画结构"
        }
      },
      "features": {
        "openpose_skeleton": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/openpose_skeleton/img_1.png",
          "exists": true
        },
        "depth_map": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/depth_map/img_1.png",
          "exists": true
        },
        "lineart_edge": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/lineart_edge/img_1.png",
          "exists": true
        },
        "color_palette": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/color_palette/img_1.png",
          "exists": true,
          "json_data": {
            "dominant_color": [
              70,
              95,
              62
            ],
            "palette": [
              [
                72,
                98,
                60
              ],
              [
                150,
                172,
                181
              ],
              [
                193,
                201,
                206
              ],
              [
                147,
                146,
                132
              ],
              [
                24,
                30,
                24
              ],
              [
                101,
                133,
                133
              ],
              [
                147,
                182,
                140
              ]
            ],
            "palette_hex": [
              "#48623c",
              "#96acb5",
              "#c1c9ce",
              "#939284",
              "#181e18",
              "#658585",
              "#93b68c"
            ]
          }
        },
        "bokeh_mask": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/bokeh_mask/img_1.png",
          "exists": true
        },
        "semantic_segmentation": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/semantic_segmentation/img_1.png",
          "exists": true
        },
        "color_distribution": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/color_distribution/img_1.png",
          "exists": true,
          "json_data": {
            "hist_h": [
              0.02299436368048191,
              0.045076314359903336,
              0.011987491510808468,
              0.013310426846146584,
              0.21862855553627014,
              0.25030627846717834,
              0.1314917802810669,
              0.0352347306907177,
              0.02485457994043827,
              0.11076493561267853,
              0.12063290178775787,
              0.005362520460039377,
              0.002378838136792183,
              0.0013802022440358996,
              0.0007515507168136537,
              0.0009613157017156482,
              0.0014381129294633865,
              0.0024451136123389006
            ],
            "hist_s": [
              0.09791071712970734,
              0.23805883526802063,
              0.23730599880218506,
              0.33129745721817017,
              0.08900406956672668,
              0.006134661380201578,
              0.0002496589731890708,
              3.860705692204647e-05
            ],
            "hist_v": [
              0.025200756266713142,
              0.17062132060527802,
              0.1783987134695053,
              0.13612976670265198,
              0.24666756391525269,
              0.14068475365638733,
              0.07682546973228455,
              0.025471650063991547
            ],
            "white_ratio": 0.0239,
            "green_ratio": 0.6277,
            "mean_brightness": 0.4702,
            "mean_saturation": 0.3217,
            "h_bins": 18,
            "s_bins": 8,
            "v_bins": 8
          }
        }
      },
      "hsv_summary": {
        "white_ratio": 0.0239,
        "green_ratio": 0.6277,
        "mean_brightness": 0.4702,
        "mean_saturation": 0.3217
      }
    },
    "img_2": {
      "active_clusters": {
        "cluster_1": {
          "聚类主题": "优雅的白裙画者",
          "亮点类型": "实质",
          "合并结论": "优雅的白裙背影"
        },
        "cluster_4": {
          "聚类主题": "虚实呼应的画中画结构",
          "亮点类型": "形式",
          "合并结论": "虚实呼应的叙事构图"
        },
        "cluster_5": {
          "聚类主题": "唯美梦幻的光影氛围",
          "亮点类型": "形式",
          "合并结论": "柔美的逆光氛围"
        }
      },
      "features": {
        "openpose_skeleton": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/openpose_skeleton/img_2.png",
          "exists": true
        },
        "depth_map": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/depth_map/img_2.png",
          "exists": true
        },
        "lineart_edge": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/lineart_edge/img_2.png",
          "exists": true
        },
        "color_palette": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/color_palette/img_2.png",
          "exists": true,
          "json_data": {
            "dominant_color": [
              138,
              156,
              105
            ],
            "palette": [
              [
                138,
                156,
                104
              ],
              [
                219,
                227,
                227
              ],
              [
                75,
                69,
                55
              ],
              [
                209,
                194,
                154
              ],
              [
                72,
                95,
                77
              ],
              [
                111,
                171,
                189
              ],
              [
                182,
                212,
                170
              ]
            ],
            "palette_hex": [
              "#8a9c68",
              "#dbe3e3",
              "#4b4537",
              "#d1c29a",
              "#485f4d",
              "#6fabbd",
              "#b6d4aa"
            ]
          }
        },
        "bokeh_mask": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/bokeh_mask/img_2.png",
          "exists": true
        },
        "semantic_segmentation": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/semantic_segmentation/img_2.png",
          "exists": true
        },
        "color_distribution": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/color_distribution/img_2.png",
          "exists": true,
          "json_data": {
            "hist_h": [
              0.0732845589518547,
              0.15593840181827545,
              0.12949064373970032,
              0.12419310957193375,
              0.23567485809326172,
              0.03178519010543823,
              0.03388284146785736,
              0.010717319324612617,
              0.01433801744133234,
              0.10481687635183334,
              0.07486487179994583,
              0.002149126259610057,
              0.0011041618417948484,
              0.0023498828522861004,
              0.0006904228939674795,
              0.0003197951300535351,
              0.003116233041509986,
              0.0012836846290156245
            ],
            "hist_s": [
              0.28900665044784546,
              0.2196548581123352,
              0.2457796037197113,
              0.18217319250106812,
              0.05714680999517441,
              0.004347797948867083,
              0.0018428434850648046,
              4.8258822062052786e-05
            ],
            "hist_v": [
              0.0,
              0.01885053887963295,
              0.12125833332538605,
              0.09530602395534515,
              0.10405567288398743,
              0.2533491551876068,
              0.15230870246887207,
              0.25487157702445984
            ],
            "white_ratio": 0.2392,
            "green_ratio": 0.3379,
            "mean_brightness": 0.6831,
            "mean_saturation": 0.2485,
            "h_bins": 18,
            "s_bins": 8,
            "v_bins": 8
          }
        }
      },
      "hsv_summary": {
        "white_ratio": 0.2392,
        "green_ratio": 0.3379,
        "mean_brightness": 0.6831,
        "mean_saturation": 0.2485
      }
    },
    "img_3": {
      "active_clusters": {
        "cluster_1": {
          "聚类主题": "优雅的白裙画者",
          "亮点类型": "实质",
          "合并结论": "纯净优雅的白裙背影"
        },
        "cluster_4": {
          "聚类主题": "虚实呼应的画中画结构",
          "亮点类型": "形式",
          "合并结论": "虚实呼应的画中画构图"
        },
        "cluster_5": {
          "聚类主题": "唯美梦幻的光影氛围",
          "亮点类型": "形式",
          "合并结论": "梦幻森系的自然光影"
        }
      },
      "features": {
        "openpose_skeleton": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/openpose_skeleton/img_3.png",
          "exists": true
        },
        "depth_map": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/depth_map/img_3.png",
          "exists": true
        },
        "lineart_edge": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/lineart_edge/img_3.png",
          "exists": true
        },
        "color_palette": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/color_palette/img_3.png",
          "exists": true,
          "json_data": {
            "dominant_color": [
              129,
              149,
              88
            ],
            "palette": [
              [
                226,
                235,
                234
              ],
              [
                126,
                145,
                86
              ],
              [
                78,
                74,
                55
              ],
              [
                210,
                200,
                155
              ],
              [
                144,
                169,
                158
              ],
              [
                171,
                205,
                110
              ],
              [
                66,
                97,
                55
              ]
            ],
            "palette_hex": [
              "#e2ebea",
              "#7e9156",
              "#4e4a37",
              "#d2c89b",
              "#90a99e",
              "#abcd6e",
              "#426137"
            ]
          }
        },
        "bokeh_mask": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/bokeh_mask/img_3.png",
          "exists": true
        },
        "semantic_segmentation": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/semantic_segmentation/img_3.png",
          "exists": true
        },
        "color_distribution": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/color_distribution/img_3.png",
          "exists": true,
          "json_data": {
            "hist_h": [
              0.08796747028827667,
              0.07544205337762833,
              0.14689534902572632,
              0.12777456641197205,
              0.3085463047027588,
              0.0542680099606514,
              0.022549094632267952,
              0.014717653393745422,
              0.011737189255654812,
              0.08198659121990204,
              0.05702970176935196,
              0.0014998841797932982,
              0.003399351378902793,
              0.0004800144233740866,
              0.0002187733189202845,
              0.0010964404791593552,
              0.0006859187269583344,
              0.0037056340370327234
            ],
            "hist_s": [
              0.22554758191108704,
              0.21504710614681244,
              0.20258988440036774,
              0.20314133167266846,
              0.1272115409374237,
              0.023029109463095665,
              0.003271948080509901,
              0.00016150619194377214
            ],
            "hist_v": [
              0.0,
              0.006298741325736046,
              0.07633130252361298,
              0.1305510550737381,
              0.1652330607175827,
              0.20487864315509796,
              0.15114469826221466,
              0.265562504529953
            ],
            "white_ratio": 0.1947,
            "green_ratio": 0.4209,
            "mean_brightness": 0.6935,
            "mean_saturation": 0.2881,
            "h_bins": 18,
            "s_bins": 8,
            "v_bins": 8
          }
        }
      },
      "hsv_summary": {
        "white_ratio": 0.1947,
        "green_ratio": 0.4209,
        "mean_brightness": 0.6935,
        "mean_saturation": 0.2881
      }
    },
    "img_4": {
      "active_clusters": {
        "cluster_1": {
          "聚类主题": "优雅的白裙画者",
          "亮点类型": "实质",
          "合并结论": "纯净的白裙画者形象"
        },
        "cluster_2": {
          "聚类主题": "充满艺术气息的写生道具",
          "亮点类型": "实质",
          "合并结论": "充满艺术感的写生道具"
        },
        "cluster_3": {
          "聚类主题": "清新自然的绿白配色",
          "亮点类型": "形式",
          "合并结论": "清新自然的绿白配色"
        },
        "cluster_6": {
          "聚类主题": "巧妙的摄影构图视角",
          "亮点类型": "形式",
          "合并结论": "均衡的左右呼应构图"
        }
      },
      "features": {
        "openpose_skeleton": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/openpose_skeleton/img_4.png",
          "exists": true
        },
        "depth_map": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/depth_map/img_4.png",
          "exists": true
        },
        "lineart_edge": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/lineart_edge/img_4.png",
          "exists": true
        },
        "color_palette": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/color_palette/img_4.png",
          "exists": true,
          "json_data": {
            "dominant_color": [
              116,
              118,
              72
            ],
            "palette": [
              [
                112,
                116,
                67
              ],
              [
                216,
                213,
                203
              ],
              [
                181,
                196,
                191
              ],
              [
                161,
                151,
                129
              ],
              [
                158,
                169,
                175
              ],
              [
                35,
                46,
                31
              ],
              [
                60,
                47,
                34
              ]
            ],
            "palette_hex": [
              "#707443",
              "#d8d5cb",
              "#b5c4bf",
              "#a19781",
              "#9ea9af",
              "#232e1f",
              "#3c2f22"
            ]
          }
        },
        "bokeh_mask": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/bokeh_mask/img_4.png",
          "exists": true
        },
        "semantic_segmentation": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/semantic_segmentation/img_4.png",
          "exists": true
        },
        "color_distribution": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/color_distribution/img_4.png",
          "exists": true,
          "json_data": {
            "hist_h": [
              0.021759580820798874,
              0.14858633279800415,
              0.21194759011268616,
              0.2254870980978012,
              0.2172277569770813,
              0.009835791774094105,
              0.007799269165843725,
              0.010793889872729778,
              0.02440738119184971,
              0.07726301997900009,
              0.03628162667155266,
              0.0028279670514166355,
              0.0010674850782379508,
              0.000593261793255806,
              0.00036226288648322225,
              0.0005269863177090883,
              0.0009741847752593458,
              0.0022585128899663687
            ],
            "hist_s": [
              0.17237728834152222,
              0.09118407964706421,
              0.1611233353614807,
              0.3682836592197418,
              0.15807917714118958,
              0.03790698200464249,
              0.009977350942790508,
              0.00106812862213701
            ],
            "hist_v": [
              0.005347077269107103,
              0.039011143147945404,
              0.10711270570755005,
              0.2906358540058136,
              0.2130337357521057,
              0.13399480283260345,
              0.10851671546697617,
              0.1023479551076889
            ],
            "white_ratio": 0.1343,
            "green_ratio": 0.3067,
            "mean_brightness": 0.5639,
            "mean_saturation": 0.3606,
            "h_bins": 18,
            "s_bins": 8,
            "v_bins": 8
          }
        }
      },
      "hsv_summary": {
        "white_ratio": 0.1343,
        "green_ratio": 0.3067,
        "mean_brightness": 0.5639,
        "mean_saturation": 0.3606
      }
    },
    "img_5": {
      "active_clusters": {
        "cluster_1": {
          "聚类主题": "优雅的白裙画者",
          "亮点类型": "实质",
          "合并结论": "洁白柔顺的衣物褶皱"
        },
        "cluster_2": {
          "聚类主题": "充满艺术气息的写生道具",
          "亮点类型": "实质",
          "合并结论": "斑斓厚重的油彩肌理"
        },
        "cluster_3": {
          "聚类主题": "清新自然的绿白配色",
          "亮点类型": "形式",
          "合并结论": "清新高雅的色彩构成"
        },
        "cluster_6": {
          "聚类主题": "巧妙的摄影构图视角",
          "亮点类型": "形式",
          "合并结论": "突出动作的局部构图"
        }
      },
      "features": {
        "openpose_skeleton": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/openpose_skeleton/img_5.png",
          "exists": true
        },
        "depth_map": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/depth_map/img_5.png",
          "exists": true
        },
        "lineart_edge": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/lineart_edge/img_5.png",
          "exists": true
        },
        "color_palette": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/color_palette/img_5.png",
          "exists": true,
          "json_data": {
            "dominant_color": [
              49,
              91,
              54
            ],
            "palette": [
              [
                49,
                91,
                54
              ],
              [
                209,
                214,
                216
              ],
              [
                104,
                75,
                64
              ],
              [
                118,
                120,
                71
              ],
              [
                108,
                147,
                169
              ],
              [
                163,
                137,
                133
              ],
              [
                37,
                190,
                206
              ]
            ],
            "palette_hex": [
              "#315b36",
              "#d1d6d8",
              "#684b40",
              "#767847",
              "#6c93a9",
              "#a38985",
              "#25bece"
            ]
          }
        },
        "bokeh_mask": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/bokeh_mask/img_5.png",
          "exists": true
        },
        "semantic_segmentation": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/semantic_segmentation/img_5.png",
          "exists": true
        },
        "color_distribution": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/color_distribution/img_5.png",
          "exists": true,
          "json_data": {
            "hist_h": [
              0.06531541794538498,
              0.09025493264198303,
              0.014375980943441391,
              0.011843358166515827,
              0.12692134082317352,
              0.15304480493068695,
              0.014180372469127178,
              0.024089517071843147,
              0.06461405754089355,
              0.11568476259708405,
              0.20321017503738403,
              0.044057730585336685,
              0.016082413494586945,
              0.010450930334627628,
              0.004185648635029793,
              0.006949913688004017,
              0.015166782774031162,
              0.019571848213672638
            ],
            "hist_s": [
              0.3696361780166626,
              0.1519850492477417,
              0.05476089194417,
              0.10194257646799088,
              0.17193330824375153,
              0.104984812438488,
              0.03291315957903862,
              0.011844001710414886
            ],
            "hist_v": [
              0.011543510481715202,
              0.01847798191010952,
              0.18232890963554382,
              0.1763029843568802,
              0.05641070008277893,
              0.07998481392860413,
              0.20172573626041412,
              0.2732253670692444
            ],
            "white_ratio": 0.2872,
            "green_ratio": 0.3239,
            "mean_brightness": 0.6478,
            "mean_saturation": 0.3156,
            "h_bins": 18,
            "s_bins": 8,
            "v_bins": 8
          }
        }
      },
      "hsv_summary": {
        "white_ratio": 0.2872,
        "green_ratio": 0.3239,
        "mean_brightness": 0.6478,
        "mean_saturation": 0.3156
      }
    },
    "img_6": {
      "active_clusters": {
        "cluster_1": {
          "聚类主题": "优雅的白裙画者",
          "亮点类型": "实质",
          "合并结论": "精致的侧颜与配饰"
        },
        "cluster_2": {
          "聚类主题": "充满艺术气息的写生道具",
          "亮点类型": "实质",
          "合并结论": "高对比的斑斓调色盘"
        },
        "cluster_6": {
          "聚类主题": "巧妙的摄影构图视角",
          "亮点类型": "形式",
          "合并结论": "沉浸式的过肩构图"
        }
      },
      "features": {
        "openpose_skeleton": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/openpose_skeleton/img_6.png",
          "exists": true
        },
        "depth_map": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/depth_map/img_6.png",
          "exists": true
        },
        "lineart_edge": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/lineart_edge/img_6.png",
          "exists": true
        },
        "color_palette": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/color_palette/img_6.png",
          "exists": true,
          "json_data": {
            "dominant_color": [
              104,
              143,
              148
            ],
            "palette": [
              [
                125,
                145,
                148
              ],
              [
                202,
                204,
                212
              ],
              [
                47,
                47,
                38
              ],
              [
                27,
                134,
                147
              ],
              [
                153,
                189,
                218
              ],
              [
                72,
                62,
                75
              ],
              [
                168,
                204,
                201
              ]
            ],
            "palette_hex": [
              "#7d9194",
              "#caccd4",
              "#2f2f26",
              "#1b8693",
              "#99bdda",
              "#483e4b",
              "#a8ccc9"
            ]
          }
        },
        "bokeh_mask": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/bokeh_mask/img_6.png",
          "exists": true
        },
        "semantic_segmentation": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/semantic_segmentation/img_6.png",
          "exists": true
        },
        "color_distribution": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/color_distribution/img_6.png",
          "exists": true,
          "json_data": {
            "hist_h": [
              0.1566610038280487,
              0.04552222415804863,
              0.011773865669965744,
              0.021885696798563004,
              0.046773094683885574,
              0.0223541297018528,
              0.03028852306306362,
              0.03333976864814758,
              0.05309435725212097,
              0.1629861295223236,
              0.3142968416213989,
              0.018021130934357643,
              0.006420996971428394,
              0.0047917794436216354,
              0.0050942013040184975,
              0.01143412385135889,
              0.020818213000893593,
              0.0344439297914505
            ],
            "hist_s": [
              0.130146324634552,
              0.3402388393878937,
              0.22351619601249695,
              0.09706779569387436,
              0.07324466854333878,
              0.04026523232460022,
              0.04923300817608833,
              0.04628793150186539
            ],
            "hist_v": [
              0.020250044763088226,
              0.11473309993743896,
              0.055246055126190186,
              0.05642228573560715,
              0.21779786050319672,
              0.23236235976219177,
              0.18257728219032288,
              0.12061101943254471
            ],
            "white_ratio": 0.0506,
            "green_ratio": 0.1604,
            "mean_brightness": 0.6068,
            "mean_saturation": 0.3338,
            "h_bins": 18,
            "s_bins": 8,
            "v_bins": 8
          }
        }
      },
      "hsv_summary": {
        "white_ratio": 0.0506,
        "green_ratio": 0.1604,
        "mean_brightness": 0.6068,
        "mean_saturation": 0.3338
      }
    },
    "img_7": {
      "active_clusters": {
        "cluster_1": {
          "聚类主题": "优雅的白裙画者",
          "亮点类型": "实质",
          "合并结论": "恬静柔美的侧颜特写"
        },
        "cluster_2": {
          "聚类主题": "充满艺术气息的写生道具",
          "亮点类型": "实质",
          "合并结论": "洁白玫瑰的互动点缀"
        },
        "cluster_3": {
          "聚类主题": "清新自然的绿白配色",
          "亮点类型": "形式",
          "合并结论": "清新的白绿配色调"
        },
        "cluster_5": {
          "聚类主题": "唯美梦幻的光影氛围",
          "亮点类型": "形式",
          "合并结论": "充满空气感的柔光氛围"
        }
      },
      "features": {
        "openpose_skeleton": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/openpose_skeleton/img_7.png",
          "exists": true
        },
        "depth_map": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/depth_map/img_7.png",
          "exists": true
        },
        "lineart_edge": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/lineart_edge/img_7.png",
          "exists": true
        },
        "color_palette": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/color_palette/img_7.png",
          "exists": true,
          "json_data": {
            "dominant_color": [
              83,
              101,
              72
            ],
            "palette": [
              [
                71,
                96,
                59
              ],
              [
                171,
                189,
                204
              ],
              [
                133,
                151,
                169
              ],
              [
                31,
                27,
                27
              ],
              [
                129,
                122,
                125
              ],
              [
                159,
                139,
                141
              ],
              [
                120,
                100,
                94
              ]
            ],
            "palette_hex": [
              "#47603b",
              "#abbdcc",
              "#8597a9",
              "#1f1b1b",
              "#817a7d",
              "#9f8b8d",
              "#78645e"
            ]
          }
        },
        "bokeh_mask": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/bokeh_mask/img_7.png",
          "exists": true
        },
        "semantic_segmentation": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/semantic_segmentation/img_7.png",
          "exists": true
        },
        "color_distribution": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/color_distribution/img_7.png",
          "exists": true,
          "json_data": {
            "hist_h": [
              0.07843989133834839,
              0.10234537720680237,
              0.015606259927153587,
              0.0037384501192718744,
              0.16384771466255188,
              0.21072953939437866,
              0.022516923025250435,
              0.020746145397424698,
              0.010117623023688793,
              0.011814403347671032,
              0.1484299749135971,
              0.046803977340459824,
              0.01757650636136532,
              0.014380485750734806,
              0.014578024856746197,
              0.0272745992988348,
              0.03201361373066902,
              0.05904048681259155
            ],
            "hist_s": [
              0.17181169986724854,
              0.1873188614845276,
              0.18251743912696838,
              0.37122422456741333,
              0.08246918022632599,
              0.00416184077039361,
              0.00048580547445453703,
              1.0938666491711047e-05
            ],
            "hist_v": [
              0.0927245020866394,
              0.09700087457895279,
              0.13095127046108246,
              0.36870384216308594,
              0.11066005378961563,
              0.08380112051963806,
              0.11162008345127106,
              0.004538259468972683
            ],
            "white_ratio": 0.0235,
            "green_ratio": 0.4193,
            "mean_brightness": 0.4381,
            "mean_saturation": 0.3139,
            "h_bins": 18,
            "s_bins": 8,
            "v_bins": 8
          }
        }
      },
      "hsv_summary": {
        "white_ratio": 0.0235,
        "green_ratio": 0.4193,
        "mean_brightness": 0.4381,
        "mean_saturation": 0.3139
      }
    },
    "img_8": {
      "active_clusters": {
        "cluster_1": {
          "聚类主题": "优雅的白裙画者",
          "亮点类型": "实质",
          "合并结论": "优雅的写生人物"
        },
        "cluster_2": {
          "聚类主题": "充满艺术气息的写生道具",
          "亮点类型": "实质",
          "合并结论": "木质画架与调色盘"
        },
        "cluster_3": {
          "聚类主题": "清新自然的绿白配色",
          "亮点类型": "形式",
          "合并结论": "清新的绿白配色"
        }
      },
      "features": {
        "openpose_skeleton": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/openpose_skeleton/img_8.png",
          "exists": true
        },
        "depth_map": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/depth_map/img_8.png",
          "exists": true
        },
        "lineart_edge": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/lineart_edge/img_8.png",
          "exists": true
        },
        "color_palette": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/color_palette/img_8.png",
          "exists": true,
          "json_data": {
            "dominant_color": [
              47,
              62,
              44
            ],
            "palette": [
              [
                206,
                204,
                201
              ],
              [
                44,
                60,
                42
              ],
              [
                94,
                139,
                90
              ],
              [
                131,
                183,
                185
              ],
              [
                110,
                149,
                166
              ],
              [
                121,
                103,
                88
              ],
              [
                86,
                104,
                112
              ]
            ],
            "palette_hex": [
              "#ceccc9",
              "#2c3c2a",
              "#5e8b5a",
              "#83b7b9",
              "#6e95a6",
              "#796758",
              "#566870"
            ]
          }
        },
        "bokeh_mask": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/bokeh_mask/img_8.png",
          "exists": true
        },
        "semantic_segmentation": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/semantic_segmentation/img_8.png",
          "exists": true
        },
        "color_distribution": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/color_distribution/img_8.png",
          "exists": true,
          "json_data": {
            "hist_h": [
              0.016288960352540016,
              0.05812549963593483,
              0.028123311698436737,
              0.03650747612118721,
              0.08802022784948349,
              0.3297860026359558,
              0.1963168829679489,
              0.07496525347232819,
              0.027654234319925308,
              0.04496306553483009,
              0.08410611748695374,
              0.005293027497828007,
              0.00219545466825366,
              0.0010121483355760574,
              0.0006923532346263528,
              0.0009973490377888083,
              0.0018737291684374213,
              0.003078912850469351
            ],
            "hist_s": [
              0.10442758351564407,
              0.14612577855587006,
              0.3257077932357788,
              0.283027708530426,
              0.10212274640798569,
              0.030628908425569534,
              0.006496280897408724,
              0.0014632074162364006
            ],
            "hist_v": [
              0.09568823873996735,
              0.23660850524902344,
              0.241120383143425,
              0.10031850636005402,
              0.18116876482963562,
              0.026423312723636627,
              0.05741770192980766,
              0.061254601925611496
            ],
            "white_ratio": 0.0714,
            "green_ratio": 0.7117,
            "mean_brightness": 0.3933,
            "mean_saturation": 0.3447,
            "h_bins": 18,
            "s_bins": 8,
            "v_bins": 8
          }
        }
      },
      "hsv_summary": {
        "white_ratio": 0.0714,
        "green_ratio": 0.7117,
        "mean_brightness": 0.3933,
        "mean_saturation": 0.3447
      }
    },
    "img_9": {
      "active_clusters": {
        "cluster_1": {
          "聚类主题": "优雅的白裙画者",
          "亮点类型": "实质",
          "合并结论": "一袭白裙的优雅背影"
        },
        "cluster_2": {
          "聚类主题": "充满艺术气息的写生道具",
          "亮点类型": "实质",
          "合并结论": "伫立草坪的木质画架"
        },
        "cluster_6": {
          "聚类主题": "巧妙的摄影构图视角",
          "亮点类型": "形式",
          "合并结论": "自然垂落的树枝框景"
        }
      },
      "features": {
        "openpose_skeleton": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/openpose_skeleton/img_9.png",
          "exists": true
        },
        "depth_map": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/depth_map/img_9.png",
          "exists": true
        },
        "lineart_edge": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/lineart_edge/img_9.png",
          "exists": true
        },
        "color_palette": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/color_palette/img_9.png",
          "exists": true,
          "json_data": {
            "dominant_color": [
              119,
              139,
              81
            ],
            "palette": [
              [
                228,
                235,
                239
              ],
              [
                120,
                140,
                81
              ],
              [
                213,
                206,
                152
              ],
              [
                50,
                53,
                37
              ],
              [
                160,
                176,
                162
              ],
              [
                47,
                87,
                70
              ],
              [
                180,
                204,
                117
              ]
            ],
            "palette_hex": [
              "#e4ebef",
              "#788c51",
              "#d5ce98",
              "#323525",
              "#a0b0a2",
              "#2f5746",
              "#b4cc75"
            ]
          }
        },
        "bokeh_mask": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/bokeh_mask/img_9.png",
          "exists": true
        },
        "semantic_segmentation": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/semantic_segmentation/img_9.png",
          "exists": true
        },
        "color_distribution": {
          "file": "/Users/elksmmx/Desktop/aigc_knowledge/aigc_workspace/output/写生油画/features/color_distribution/img_9.png",
          "exists": true,
          "json_data": {
            "hist_h": [
              0.012288626283407211,
              0.04225928336381912,
              0.09236609935760498,
              0.1584002524614334,
              0.24352367222309113,
              0.04621071740984917,
              0.02858530916273594,
              0.028737805783748627,
              0.024914421141147614,
              0.06194116175174713,
              0.052537769079208374,
              0.004524746909737587,
              0.005542686674743891,
              0.1909305602312088,
              0.0033851955085992813,
              0.0011099529219791293,
              0.001967029646039009,
              0.0007747149793431163
            ],
            "hist_s": [
              0.3372262120246887,
              0.15812550485134125,
              0.1551109254360199,
              0.21685005724430084,
              0.10838223248720169,
              0.02103441208600998,
              0.0029714566189795732,
              0.00029920469387434423
            ],
            "hist_v": [
              0.0014799372293055058,
              0.03709237277507782,
              0.06861117482185364,
              0.10374681651592255,
              0.1604354828596115,
              0.18214423954486847,
              0.11757586151361465,
              0.3289141058921814
            ],
            "white_ratio": 0.307,
            "green_ratio": 0.3654,
            "mean_brightness": 0.7022,
            "mean_saturation": 0.2595,
            "h_bins": 18,
            "s_bins": 8,
            "v_bins": 8
          }
        }
      },
      "hsv_summary": {
        "white_ratio": 0.307,
        "green_ratio": 0.3654,
        "mean_brightness": 0.7022,
        "mean_saturation": 0.2595
      }
    }
  },
  "feature_dimension_details": {
    "openpose_skeleton": {
      "名称": "OpenPose 人体骨架图",
      "描述": "使用 lllyasviel/ControlNet OpenposeDetector 提取的人体关键点骨架图，包含身体18个关键点（头部、肩膀、肘部、手腕、髋部、膝盖、脚踝等）",
      "工具": "controlnet_aux.OpenposeDetector (lllyasviel/ControlNet)",
      "格式": "PNG RGB图像，黑色背景+彩色骨架线",
      "生成模型用途": "ControlNet OpenPose条件控制 - 精确控制人物姿态、站立/跪坐/侧身/背影等",
      "对应亮点": [
        "cluster_1",
        "cluster_6"
      ]
    },
    "depth_map": {
      "名称": "MiDaS 深度图",
      "描述": "使用 lllyasviel/Annotators MidasDetector 提取的单目深度估计图，灰度值表示相对深度（亮=近，暗=远）",
      "工具": "controlnet_aux.MidasDetector (lllyasviel/Annotators)",
      "格式": "PNG 灰度图像",
      "生成模型用途": "ControlNet Depth条件控制 - 控制场景空间层次、前景/背景分离、景深效果",
      "对应亮点": [
        "cluster_4",
        "cluster_5"
      ]
    },
    "lineart_edge": {
      "名称": "Lineart 线稿图",
      "描述": "使用 lllyasviel/Annotators LineartDetector 提取的精细线稿，保留服装褶皱、画架结构、人物轮廓等细节",
      "工具": "controlnet_aux.LineartDetector (lllyasviel/Annotators)",
      "格式": "PNG 灰度图像（白线黑底）",
      "生成模型用途": "ControlNet Lineart条件控制 - 控制服装褶皱、画架结构、整体构图轮廓",
      "对应亮点": [
        "cluster_1",
        "cluster_2"
      ]
    },
    "color_palette": {
      "名称": "ColorThief 色彩调色板",
      "描述": "使用 ColorThief 从图片提取的主色调和8色调色板，以RGB色块图和JSON格式存储",
      "工具": "colorthief.ColorThief",
      "格式": "PNG 色块图 (640×80) + JSON {dominant_color, palette, palette_hex}",
      "生成模型用途": "Stable Diffusion color palette条件 / IP-Adapter颜色参考 - 精确控制整体色调",
      "对应亮点": [
        "cluster_3",
        "cluster_2"
      ]
    },
    "bokeh_mask": {
      "名称": "Bokeh 虚化遮罩",
      "描述": "基于MiDaS深度图生成的虚化区域遮罩，亮区=清晰（主体），暗区=虚化（背景），量化大光圈散景效果",
      "工具": "自定义算法 (MiDaS深度图归一化)",
      "格式": "PNG 灰度图像 (0=完全虚化, 255=完全清晰)",
      "生成模型用途": "ControlNet Blur/Depth条件 / 后处理散景合成 - 控制虚化程度和区域",
      "对应亮点": [
        "cluster_4"
      ]
    },
    "semantic_segmentation": {
      "名称": "KMeans 语义分割图",
      "描述": "在LAB色彩空间使用KMeans(k=6)聚类的语义分割图，区分白裙/草地/画架/天空/皮肤/其他区域",
      "工具": "sklearn.cluster.KMeans (LAB色彩空间, k=6)",
      "格式": "PNG RGB彩色分割图，固定颜色编码: 白=白裙, 绿=草地, 棕=画架, 蓝=天空, 肤=皮肤, 灰=其他",
      "生成模型用途": "ControlNet Segmentation条件 - 控制各区域的空间布局和比例",
      "对应亮点": [
        "cluster_1",
        "cluster_3",
        "cluster_5"
      ]
    },
    "color_distribution": {
      "名称": "HSV 色彩分布直方图",
      "描述": "在HSV色彩空间计算的色相/饱和度/明度分布直方图，量化白色比例、绿色比例、平均亮度等关键指标",
      "工具": "OpenCV cv2.calcHist (HSV空间, H:18bins, S:8bins, V:8bins)",
      "格式": "PNG 直方图可视化 + JSON {hist_h, hist_s, hist_v, white_ratio, green_ratio, mean_brightness, mean_saturation}",
      "生成模型用途": "色彩条件控制向量 / 后处理色调调整参考 - 量化白绿配色比例",
      "对应亮点": [
        "cluster_3",
        "cluster_4"
      ]
    }
  }
};


        // 维度详细信息
        const dimensionDetails = {
            "openpose_skeleton": {
                        "来源亮点": [
                                    "cluster_1（优雅的白裙画者）：骨架图直接编码人物站立/跪坐/侧身/背影等姿态",
                                    "cluster_6（巧妙的摄影构图视角）：骨架位置反映人物在画面中的构图位置"
                        ],
                        "制作表特征": [
                                    "人物姿态（评分0.80~0.95）→ 骨架关键点位置",
                                    "人物朝向（评分0.78~0.90）→ 骨架朝向方向",
                                    "人物动作（评分0.88~0.94）→ 手臂/手腕关键点"
                        ],
                        "输出文件": "9个PNG骨架图（黑色背景+彩色骨架线，1080×1439）"
            },
            "depth_map": {
                        "来源亮点": [
                                    "cluster_4（虚实呼应的画中画结构）：深度图区分前景画架/人物与背景草地",
                                    "cluster_5（唯美梦幻的光影氛围）：深度梯度反映景深程度，支持大光圈散景效果"
                        ],
                        "制作表特征": [
                                    "画面清晰度（评分0.60~0.75）→ 深度梯度",
                                    "前后关系（评分0.78）→ 深度分层"
                        ],
                        "输出文件": "9个PNG灰度深度图（亮=近，暗=远，1080×1439）"
            },
            "lineart_edge": {
                        "来源亮点": [
                                    "cluster_1（优雅的白裙画者）：白裙褶皱轮廓、发型线条",
                                    "cluster_2（充满艺术气息的写生道具）：画架结构、调色板轮廓的精细线稿"
                        ],
                        "制作表特征": [
                                    "服装款式（评分0.82~0.85）→ 裙摆褶皱线稿",
                                    "人物完整性（评分0.65）→ 全身轮廓线稿"
                        ],
                        "输出文件": "9个PNG线稿图（白线黑底，1080×1439）"
            },
            "color_palette": {
                        "来源亮点": [
                                    "cluster_3（清新自然的绿白配色）：调色板精确捕获白色和绿色的具体色值",
                                    "cluster_2（充满艺术气息的写生道具）：调色板上的油画颜料颜色"
                        ],
                        "制作表特征": [
                                    "色彩搭配（评分0.75~0.88）→ 主色调和调色板",
                                    "色彩饱和度 → 调色板色值"
                        ],
                        "输出文件": "9个PNG色块图(640×80) + 9个JSON文件（包含dominant_color, palette, palette_hex）"
            },
            "bokeh_mask": {
                        "来源亮点": [
                                    "cluster_4（虚实呼应的画中画结构）：遮罩区分清晰的主体区域和虚化的背景区域"
                        ],
                        "制作表特征": [
                                    "画面清晰度 → 清晰度权重分布",
                                    "虚实对比 → 遮罩梯度"
                        ],
                        "输出文件": "9个PNG灰度遮罩（0=完全虚化，255=完全清晰，1080×1439）"
            },
            "semantic_segmentation": {
                        "来源亮点": [
                                    "cluster_1（优雅的白裙画者）：白色区域精确定位白裙范围",
                                    "cluster_3（清新自然的绿白配色）：绿色/白色区域比例量化配色",
                                    "cluster_5（唯美梦幻的光影氛围）：分割图反映画布区域与现实场景的空间关系"
                        ],
                        "制作表特征": [
                                    "区域分布 → 白裙/草地/画架/天空/皮肤/其他的空间布局",
                                    "色彩区域比例 → 各区域占比"
                        ],
                        "输出文件": "9个PNG彩色分割图（固定颜色编码：白=白裙，绿=草地，棕=画架，蓝=天空，肤=皮肤，灰=其他，1080×1439）"
            },
            "color_distribution": {
                        "来源亮点": [
                                    "cluster_3（清新自然的绿白配色）：white_ratio和green_ratio量化白绿配色比例",
                                    "cluster_4（虚实呼应的画中画结构）：mean_brightness反映整体光照水平"
                        ],
                        "制作表特征": [
                                    "色彩分布 → HSV直方图向量",
                                    "白色比例（S<30且V>200）→ white_ratio",
                                    "绿色比例（H∈[35,85]且S>40）→ green_ratio",
                                    "整体亮度（V通道均值/255）→ mean_brightness",
                                    "整体饱和度（S通道均值/255）→ mean_saturation"
                        ],
                        "输出文件": "9个PNG直方图可视化(1200×300) + 9个JSON文件（包含hist_h, hist_s, hist_v, white_ratio, green_ratio, mean_brightness, mean_saturation）"
            }
};\

        // 图片路径配置
        const basePath = '.';

        // 渲染总览区域
        function renderOverview() {
            // 渲染亮点聚类总览
            const clusterContainer = document.getElementById('clusterOverview');
            const clusters = mappingData.cluster_overview;

            Object.keys(clusters).forEach(clusterId => {
                const cluster = clusters[clusterId];
                const item = document.createElement('div');
                item.className = 'cluster-overview-item';

                item.innerHTML = `
                    <div class="cluster-overview-title">${cluster.聚类主题}</div>
                    <div class="cluster-overview-meta">
                        <span>📌 ${cluster.亮点类型}</span>
                        <span>🖼️ ${cluster.图片数量}张图片</span>
                    </div>
                `;

                clusterContainer.appendChild(item);
            });

            // 渲染特征维度总览
            const dimensionContainer = document.getElementById('dimensionOverview');
            const dimensions = mappingData.feature_dimension_details;

            Object.keys(dimensions).forEach(dimKey => {
                const dim = dimensions[dimKey];
                const item = document.createElement('div');
                item.className = 'dimension-overview-item';

                // 获取对应的聚类标签
                const clusterTags = dim.对应亮点.map(cId => {
                    const cluster = mappingData.cluster_overview[cId];
                    return `<span class="mini-cluster-tag">${cluster.聚类主题}</span>`;
                }).join('');

                item.innerHTML = `
                    <div class="dimension-overview-title">${dim.名称}</div>
                    <div class="dimension-overview-clusters">${clusterTags}</div>
                `;

                dimensionContainer.appendChild(item);
            });
        }

        // 渲染原始图片
        function renderOriginalImages() {
            const container = document.getElementById('originalImages');
            const images = Object.keys(mappingData.image_overview);
            
            images.forEach(imgName => {
                const imgData = mappingData.image_overview[imgName];
                const card = document.createElement('div');
                card.className = 'image-card';
                card.onclick = () => openModal(`${basePath}/input/${imgName}.jpg`);
                
                const clusters = Object.values(imgData.active_clusters);
                const clusterTags = clusters.map(c => 
                    `<span class="cluster-tag">${c.聚类主题}</span>`
                ).join('');
                
                const hsvInfo = imgData.hsv_summary;
                
                card.innerHTML = `
                    <img src="${basePath}/input/${imgName}.jpg" alt="${imgName}" loading="lazy">
                    <div class="image-info">
                        <div class="image-name">${imgName}</div>
                        <div class="image-clusters">${clusterTags}</div>
                        <div style="margin-top: 10px; font-size: 0.85em; color: #666;">
                            <div>🟢 绿色: ${(hsvInfo.green_ratio * 100).toFixed(1)}%</div>
                            <div>⚪ 白色: ${(hsvInfo.white_ratio * 100).toFixed(1)}%</div>
                            <div>💡 亮度: ${(hsvInfo.mean_brightness * 100).toFixed(1)}%</div>
                        </div>
                    </div>
                `;
                
                container.appendChild(card);
                
                // 默认加载图片
<!--                const grid = document.getElementById(`grid-${dimKey}`);-->
<!--                loadDimensionImages(dimKey, grid);-->
            });
        }
        
        // 渲染特征维度
        function renderDimensions() {
            const container = document.getElementById('dimensionsContainer');
            const dimensions = mappingData.feature_dimension_details;
            
            Object.keys(dimensions).forEach(dimKey => {
                const dim = dimensions[dimKey];
                const card = document.createElement('div');
                card.className = 'dimension-card';
                card.id = `dim-${dimKey}`;
                
                // 获取对应的聚类信息
                const clusters = dim.对应亮点.map(cId => {
                    const cluster = mappingData.cluster_overview[cId];
                    return `<span class="cluster-badge">${cluster.聚类主题} (${cluster.亮点类型})</span>`;
                }).join('');
                
                card.innerHTML = `
                    <div class="dimension-header" onclick="toggleDimension('${dimKey}')">
                        <div class="dimension-title">${dim.名称}</div>
                        <button class="toggle-btn">展开查看</button>
                    </div>
                    
                    <div class="dimension-description" style="cursor: pointer;" onclick="toggleDetails('${dimKey}')">
                        <strong>📝 描述：</strong>${dim.描述}
                        <span style="float: right; color: #667eea; font-size: 0.9em;">
                            <span id="toggle-text-${dimKey}">▼ 展开工具信息</span>
                        </span>
                    </div>
                    
                    <div class="detail-toggle-content" id="details-${dimKey}" style="margin-top: 15px;">
                        <div class="dimension-meta" style="grid-template-columns: repeat(3, 1fr);">
                            <div class="meta-item">
                                <div class="meta-label">🛠️ 提取工具</div>
                                <div class="meta-value">${dim.工具}</div>
                            </div>
                            <div class="meta-item">
                                <div class="meta-label">📄 格式</div>
                                <div class="meta-value">${dim.格式}</div>
                            </div>
                            <div class="meta-item">
                                <div class="meta-label">🎯 生成模型用途</div>
                                <div class="meta-value">${dim.生成模型用途}</div>
                            </div>
                        </div>
                    </div>

                    <div class="io-container">
                        <div class="input-box">
                            <div class="box-title">📥 输入</div>
                            <div class="detail-section">
                                <h4>📍 来源亮点</h4>
                                <ul>
                                    ${dimensionDetails[dimKey]['来源亮点'].map(item => '<li>' + item + '</li>').join('')}
                                </ul>
                            </div>
                            <div class="detail-section">
                                <h4>🎯 制作表特征对应</h4>
                                <ul>
                                    ${dimensionDetails[dimKey]['制作表特征'].map(item => '<li>' + item + '</li>').join('')}
                                </ul>
                            </div>
                        </div>

                        <div class="output-box">
                            <div class="box-title">📤 输出</div>
                            <div class="detail-section">
                                <h4>📦 输出文件</h4>
                                <p>${dimensionDetails[dimKey]['输出文件']}</p>
                            </div>
                            <div class="dimension-content" id="content-${dimKey}">
                                <div class="feature-images-grid" id="grid-${dimKey}"></div>
                            </div>
                        </div>
                    </div>
                `;
                
                container.appendChild(card);
                
                // 默认加载图片
                const grid = document.getElementById(`grid-${dimKey}`);
                loadDimensionImages(dimKey, grid);
            });
        }
        
        // 切换维度展开/收起
        function toggleDimension(dimKey) {
            const content = document.getElementById(`content-${dimKey}`);
            const btn = document.querySelector(`#dim-${dimKey} .toggle-btn`);
            
            if (content.style.display === 'none') {
                content.style.display = 'block';
                btn.textContent = '收起';
            } else {
                content.style.display = 'none';
                btn.textContent = '展开查看';
            }
        }
        

        // 切换详细信息展开/收起
        function toggleDetails(dimKey) {
            const detailsContent = document.getElementById(`details-${dimKey}`);
            const toggleText = document.getElementById(`toggle-text-${dimKey}`);
            
            if (detailsContent.classList.contains('active')) {
                detailsContent.classList.remove('active');
                toggleText.textContent = '▼ 展开工具信息';
            } else {
                detailsContent.classList.add('active');
                toggleText.textContent = '▲ 收起工具信息';
            }
        }
        
        // 加载维度图片
        function loadDimensionImages(dimKey, grid) {
            const images = Object.keys(mappingData.image_overview);
            
            images.forEach(imgName => {
                const imgData = mappingData.image_overview[imgName];
                const featurePath = `${basePath}/output/features/${dimKey}/${imgName}.png`;
                
                const card = document.createElement('div');
                card.className = 'feature-image-card';
                
                // 创建图片元素
                const img = document.createElement('img');
                img.src = featurePath;
                img.alt = imgName;
                img.loading = 'lazy';
                img.style.cursor = 'pointer';
                img.onclick = () => openModal(featurePath, imgName);
                card.appendChild(img);
                
                // 创建标签
                const label = document.createElement('div');
                label.className = 'feature-image-label';
                label.textContent = imgName;
                card.appendChild(label);
                
                // 特殊处理：color_palette 和 color_distribution 有额外信息
                if (dimKey === 'color_palette' && imgData.features.color_palette.json_data) {
                    const palette = imgData.features.color_palette.json_data;
                    
                    // 替换图片为原图
                    img.src = `${basePath}/input/${imgName}.jpg`;
                    
                    // 添加色彩调色板
                    const paletteDiv = document.createElement('div');
                    paletteDiv.className = 'color-palette-display';
                    paletteDiv.style.padding = '10px';
                    
                    palette.palette_hex.forEach(hex => {
                        const colorBlock = document.createElement('div');
                        colorBlock.className = 'color-block';
                        colorBlock.style.background = hex;
                        colorBlock.setAttribute('data-hex', hex);
                        paletteDiv.appendChild(colorBlock);
                    });
                    
                    card.appendChild(paletteDiv);
                } else if (dimKey === 'color_distribution' && imgData.features.color_distribution.json_data) {
                    const hsv = imgData.features.color_distribution.json_data;
                    const hsvDiv = document.createElement('div');
                    hsvDiv.className = 'hsv-stats';
                    hsvDiv.style.padding = '10px';
                    
                    const stats = [
                        { label: '绿色', value: (hsv.green_ratio * 100).toFixed(1) + '%' },
                        { label: '白色', value: (hsv.white_ratio * 100).toFixed(1) + '%' },
                        { label: '亮度', value: (hsv.mean_brightness * 100).toFixed(0) + '%' },
                        { label: '饱和度', value: (hsv.mean_saturation * 100).toFixed(0) + '%' }
                    ];
                    
                    stats.forEach(stat => {
                        const statDiv = document.createElement('div');
                        statDiv.className = 'hsv-stat';
                        
                        const statLabel = document.createElement('div');
                        statLabel.className = 'hsv-stat-label';
                        statLabel.textContent = stat.label;
                        
                        const statValue = document.createElement('div');
                        statValue.className = 'hsv-stat-value';
                        statValue.textContent = stat.value;
                        
                        statDiv.appendChild(statLabel);
                        statDiv.appendChild(statValue);
                        hsvDiv.appendChild(statDiv);
                    });
                    
                    card.appendChild(hsvDiv);
                }
                
                grid.appendChild(card);
            });
        }
        
        // 打开图片模态框
        function openModal(imagePath, imgName = null) {
            const modal = document.getElementById('imageModal');
            const modalOriginal = document.getElementById('modalOriginalImage');
            const modalFeature = document.getElementById('modalFeatureImage');
            const featureContainer = document.getElementById('featureImageContainer');
            
            modal.classList.add('active');
            
            if (imgName) {
                // 显示原图和特征图对比
                modalOriginal.src = `${basePath}/input/${imgName}.jpg`;
                modalFeature.src = imagePath;
                featureContainer.classList.remove('hidden');
            } else {
                // 只显示原图
                modalOriginal.src = imagePath;
                featureContainer.classList.add('hidden');
            }
        }
        
        // 关闭模态框
        function closeModal() {
            const modal = document.getElementById('imageModal');
            modal.classList.remove('active');
        }
        
        // 点击模态框背景关闭
        document.getElementById('imageModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeModal();
            }
        });
        
        // ESC键关闭模态框
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeModal();
            }
        });
        
        // 页面加载完成后渲染
        document.addEventListener('DOMContentLoaded', function() {
            renderOverview();
            renderOriginalImages();
            renderDimensions();
        });
    </script>
</body>
</html>