<!--                                                                                                                              
                                                                                                                             
                                                                                                                             
                                         ..;+$&& &&&&$Xx;                                                                  
                                      ..;+$&&&&&&&&&&&&&&&&&$Xx;                                                                  
                                      .x&&&&&&&&&&&&&&&&&&&&&&&&&&&&:                                                             
                                   .x&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&;                                                          
                                   X&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&;                                                       
                                 .x&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&X:                                                    
                                :X&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&x                                                   
                              :$&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&.                                                 
                             :$&&&&&&&&&&&&&$$$$$$$$$$$$$$&&&&&&&&&&&&&&&&&&&&&&&+                                                
                            ;$&&&&&&&&&$$$XXXXXXXxxxxxxXXXXXX$$$$&&&&&&&&&&&&&&&&&x                                               
                            X&&&&&&&&$$XXXXXXxXxxxxxxxxxxxxxxxxxxxxX$&&&&&&&&&&&&&&&                                              
                           :&&&&&&&$$$XXXXXXxxxxxxx+x++++++++++++xxxxxxX$&&&&&&&&&&&;                                             
                          .$&&&&&&$$$XXXXXxxxxxxxxxx++++++++++++++++++xxxx$&&&&&&&&&X                                             
                          $&&&&&&$$$XXXXxxxxxxxxx+++++++++++++++++++++++xxxx$&&&&&&&&                                             
                         :&&&&&&$$$XXXXXxxxxxxxxx+++++++++++++;+++++++++++xxxX$&&&&&&.                                            
                         $&&&&&$$$XXXXXXxxxxxxx++++++++++++++++++++++++++++xxxX$&&&&&+                                            
                        .&&&&&&$$XXXXXxxxxxxxxx++++++++++++;;+++++++++++++++xxxX$&&&&+                                            
                        ;&&&&&&$$XXXXxxxxxxxx+++++++++++++++++++++;++++++++++xxxX&&&&x                                            
                        X&&&&&$$XXXXXXXXxxxxx+++++;;+;;;;;;;;;++;;;;++++++++++xxX$&&&&.                                           
                        X&&&&&$XX$&&&&&&&&&$$Xxxx++++++;;;;;+++++;++++++++++++xxX$&&&&X                                           
                        X&&&&$X$&&&&&&&&&&&&&&&$$Xxxxx++++++++++++++++++++++xxxxx$&&&&$                                           
                        &&&&&XX$&&&$$$$$$$$$$&&$$$$XXXx+++++++xxxXXX$$$&&&$$$$$XxX&&&&+                                           
                        X&&&&XXXXXXXxxxx++xxXX$$$$XXXXxx++++xxXXXX$$$&&&&&&&&&&&Xx&&&&.                                           
                        +&&&XXxXXxxxxxx++++++xxxXXXXXxxx++++xxXXXXXXXXxxxxxxX$$$$X&&&x                                            
                        X&&&XXXXXxXX$XXXXxxxX$XxxXXXXxxx+++++xXXXXxxxx++++++++xxxx&&&;                                            
                       ;$&&XxxXXXX$$&&&&&&&&&&$$xXXXXXx++;+++xXXXX$$&&$$$$Xx++++++X&&                                             
                       X$&&xxxxXX$$$$$$&&&&&&X$&$+xxxXx++;+++xxxX&&&&&&&&$&&&$Xx++x&+                                             
                      ;$$&$XxxxxxxxxXxxXXXXxxx+++++xxxx++;++++++++xxX&&&&XXXXXXx+++&$:                                            
                      +$$$$xxxxxxx++xxxxxxxxxx++x+xxxxx++;;+++++++xxx++++++++++++++$$+                                            
                      .XX$$xxxxxxx+++++++++++++++xxxxxx++;+++++++++++xxx+++++++++++Xx+                                            
                       xX$$xxxxxxx++++++++++++++xxxxxxx++;;+++++++;+++;+;;;;;++++++x++                                            
                       ;XX$Xxxxxxx+++++++++++++xxxxxxxx++;+++++++++;;;;;;;;;;+++++++;.                                            
                        +X$XXxxxx+++++++++++++xxXXxxxxx+;;;++++xx+++;;;;;;++++++++++.                                             
                         +$XXXxxxx+++++++++++xxxxxxxxxx+;;;+++++xxx+++;;;+;;;++++++:                                              
                          XXXXxxxx+++++++++xxxxx+++xxxx++++++++++xxx++++++++++++++.                                               
                           ;XXXXxxxx++++xxxxxxxxxxxxxxxx++++++++++xxxx+++++++++++;                                                
                            xXXXXxxxxxxxxxxxxX$$$$&&&$$XXXX$&&$$Xx++xxxx+++++++++:                                                
                            +XXXXXXXXxXxxxxxxX$$$$$$$$$$$$$$$$$$X++++xxxxxxxxx+++                                                 
                            ;XXX$$XXXxxxxxxxxXXXXXXXXXXXXx++++++++++++xxxxxxxxx+;                              ;++;:              
                            .xXX$$$XxxxxxxxxXxxxxxxx++++++++++++++xxx++++xxxxx++                              ;xx++;;             
                             +XXX$XXxxxxxxXXXXxxxxxx++++++++++++++xxxxx+++xxxxx:            .                .xxx+++;             
                              XXXXXXXxxxxX$&&&&&&$$$$XxxxXX$$$$$$&&&$Xx++++xxx;           :+++;.             +xxxx++;             
                              .XXX$XXXxxxxxxXX$$$$$$$$&$$$XxXXXXx+xxXXxx+xxxx;            x+++;;             Xxx+x++:             
                               ;$$$$XXXxxxxxxxxXXX$$$XXxxxxXXxx++++++xxxxxxx+            .xx++;;.           :Xxxxx++.             
                                +$$$$$$XXxxxxxxxxXXXXXXXXXXxxxx++++++xxxxxx;             :xx+++;;           ;Xxxxxx+              
                                 $&$$$$$$XXxxxxxxxxXXXXXXXXxxxx++++xxxxxXx;              :x+++++;           xx+++++:              
                            ..   $&&&$$$$XXXxxxxxxxxxxxxxxxxxxxxxxxxxxxxX:               .Xx+++++          .xx+++++.              
                        X&&&&&&&&&&&&&&&$$XXXxxxxxxxxxxxxxxxxxxxxxxxxxx+                  XXxxx++.         +xx+++++.              
                      $&&&&&&&&&&&&$&&&&&$$$XXXxxxxxxxxxxxxxxxxxxxxXXX+                   +xx+++;;        .Xx++++++               
                   :$&&&&&&&&&&&&&&&&$&&&&&&$$XXXXXXXXXXXXxxxxXXXXXXXx.                   ;Xx+++++.       ;Xxx+++++               
                  $&&&&&&&&&&&&&&$$$&&&&&&&&&&&$$$XXXXXXXXXXXX$$$$$Xxx                    +Xx+++++;       xxx+xxx+;               
             .;&&&&&&&&&&&&&&&&&&$$$$$&&&&&&&&&&&&&&&$$$$$$&&&&$$XXxx+                    +Xxxxx+++      :Xxx+++++:               
       +$&&&&&&&&&&&&&&&&&&&&&&&&$$$$$$$&&&&&&&&&&&&&&&&&&&&&$$XXxxxx+                    .$Xxxx+++:     xXxx++++;.               
     &&&&&&&&&&&&&&&&&&&&&&&&&&&&&$$$$$$$$&&&&&&&&&&&&&&&&&&$$XXxxxxx;                     XXx+++++:    .XXxx++++;                
     &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$$XXX$$$$&&&&&&$$&&&&&$$$$Xxxxxxxx&.                    +Xx+++++;    ;XXxx++++:                
     &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&XXXXX$$$$$&&&&&&&$$$$$$XXXxxxxxX&&:                   ;Xxx+++++   .xXxxxxx++                 
     &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&XxxxXXXX$$$$$$$$$$$XXXXxxxxxxx&&&&                   .$Xxx++++.  +xxxxxxx+;                 
     &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&xxxxxxxxxxx+++x++xxxxxxxxxxx$&&&&&&&&&&&&X.        .XXxx+++++;;;;+++++++;                 
     &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&x+xxxxxxxxxxxxx+xxxxxxxxxX&&&&&&&&&&&&&&&&&;     .$$Xx+++++++++++++++++;;::.            
     &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&+xxxxxxxx++xxxxxxxxxxXX$&&&&&&&&&&&&&&&&&&&.   .$Xxx++++++++++++++x+++xxxxxx+++       
     &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&Xxxxxxx+++++xxxxxxxXX$&&&&&&&&&&&&&&&&&&&&X  .$$Xxx++++++++++x++xxxXXxxXxx++;++.    
     &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$xxxxx+++++++xxxxX$$&$&&&&&&&&&&&&&&&&&&&&  $$Xx+++++++++++xx+XXX$$$X$Xx++++++.   
     &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&Xxx++++++++xxxX$$$$&&&&&&&&&&&&&&&&&&&&&:X$$x+x++xx+x++xxxxX$X$$$$$Xx++++++.   
     &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&Xx++++xxxX$$&&&&&&&&&&&&&&&&&&&&&&&&&$$X++x++xx+++xxxXX$$$$$$Xx+++++++.   
     &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$XXX+++++++++xxxXX$$$$$$Xx+++++++x;  
     &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$XX$X++++++++xxxXX$$$$$$x++++++++++; 
     &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$Xxx$$x+++++xxxxX$$$$$$Xx+++++++++++:
     &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$Xxxx$Xx+++++xxxX$$$$$Xxx++++++++++++
     &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$Xxxxx$$x++++xXX$$$$$$Xxx+++++x+++++:
     &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&XXxxxxX$x+++xXXxxXXxxxxxx+;+xx++++; 
     &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$XXxxxxxXXXXXxxxxXXXxx++++++xx++++: 
     &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$XXXX$$$$$Xxx++xxxxxxx+++++xXxx++. 
     &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$$$$$$$$$$Xx++++xxXXxxx++x+xXXxx:  
     &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$$$$$$$$$$Xxx+xxxxxxxxxxxXXXXx    
     &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$$$$$$$$$$$XxxxxxxxxxxXxxXXx+.     
    
    这些是HTML代码，真没啥好看的 - 杰
    
-->


<!-- 
conda换源：
conda config --show channels
conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/
conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main/
conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud/pytorch/
conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud/conda-forge/

pip换源：
pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
-->


<!DOCTYPE html>
<html lang="zh-CN" color-mode="light">

<head>
  <meta charset="utf-8">
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1" /> -->
  <meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=1, user-scalable=no">

  
  <meta name="author" content="杰" />
  <meta name="description" content="" />
  
  
  <title>
    
      只需5MB浏览器也能可完成人脸+关键点检测 
      
      
      |
    
     人工智能小站站
  </title>

  
    <link rel="apple-touch-icon" href="/images/favicon.png">
    <link rel="icon" href="/images/favicon.png">
  

  <!-- Raleway-Font -->
  <!-- <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet"> -->

  <!-- hexo site css -->
  <link rel="stylesheet" href="/css/main.css" />
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1886449_67xjft27j1l.css" />

  <!-- <style>
    @font-face {
      font-family: 'NotoSansSC';
      src: url('https://pub-0a02c629549c4638b41011dd3ce66f6a.r2.dev/NotoSansSC-Regular.ttf') format('truetype');
    }

    body {
      font-family: NotoSansSC,sans-serif;
    }
  </style> -->

  <!-- 代码块风格 -->
  

  <!-- jquery3.3.1 -->
  
    <script defer type="text/javascript" src="/plugins/jquery.min.js"></script>
  

  <!-- fancybox -->
  
    <link href="/plugins/jquery.fancybox.min.css" rel="stylesheet">
    <script defer type="text/javascript" src="/plugins/jquery.fancybox.min.js"></script>
  
  
<script src="/js/fancybox.js"></script>


  <script>
    var html = document.documentElement
    const colorMode = localStorage.getItem('color-mode')
    if (colorMode) {
      document.documentElement.setAttribute('color-mode', colorMode)
    }
  </script>
<!-- hexo injector head_end start -->
<link rel="stylesheet" href="/plugins/katex/dist/katex.min.css">

<link rel="stylesheet" href="/plugins/hexo-math/dist/style.css">
<!-- hexo injector head_end end --><meta name="generator" content="Hexo 7.3.0"></head>


  <body>
    <div id="app">
      <div class="header">
  <div class="avatar">
    <a href="/">
      <!-- 头像取消懒加载，添加no-lazy -->
      
        <img src="/images/avatar.webp" alt="">
      
    </a>
    <div class="nickname"><a href="/">hahaha.love 个人学习笔记</a></div>
  </div>
  <div class="navbar">
    <ul>
      
        <li class="nav-item" data-path="/">
          <a href="/">首页</a>
        </li>
      
        <li class="nav-item" data-path="/tags/编程语言/">
          <a href="/tags/编程语言/">编程语言</a>
        </li>
      
        <li class="nav-item" data-path="/archives/">
          <a href="/archives/">日期归档</a>
        </li>
      
        <li class="nav-item" data-path="/tags/">
          <a href="/tags/">标签</a>
        </li>
      
        <li class="nav-item" data-path="/life/">
          <a href="/life/">生活</a>
        </li>
      
        <li class="nav-item" data-path="/software/">
          <a href="/software/">软件下载</a>
        </li>
      
        <li class="nav-item" data-path="/about/">
          <a href="/about/">关于我</a>
        </li>
      
    </ul>
  </div>
</div>


<script src="/js/activeNav.js"></script>


        <div class="flex-container">
          <!-- 文章详情页，展示文章具体内容，url形式：https://yoursite/文章标题/ -->
<!-- 同时为「标签tag」，「朋友friend」，「分类categories」，「关于about」页面的承载页面，具体展示取决于page.type -->


  <!-- LaTex Display -->

  
    <script async type="text/javascript" src="/plugins/mathjax/tex-chtml.js"></script>
  
  <script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']]
      }
    }
  </script>


        <!-- clipboard -->

  
    <script async type="text/javascript" src="/plugins/clipboard.min.js"></script>
  
  
<script src="/js/codeCopy.js"></script>


                                  <!-- 文章内容页 url形式：https://yoursite/文章标题/ -->
                                  <div class="container post-details" id="post-details">
                                    <div class="post-content">
                                      <div class="post-title">只需5MB浏览器也能可完成人脸+关键点检测</div>
                                      <div class="post-attach">
                                        <span class="post-pubtime">
                                          <i class="iconfont icon-updatetime mr-10" title="更新时间"></i>
                                          2024-10-25 16:14:41
                                        </span>
                                        
                                          <span class="post-tags">
                                            <i class="iconfont icon-tags mr-10" title="标签"></i>
                                            
                                              <span class="span--tag mr-8">
                                                <a href="/tags/%E4%BA%BA%E8%84%B8%E6%A3%80%E6%B5%8B/" title="人脸检测">
                                                  #人脸检测
                                                </a>
                                              </span>
                                              
                                          </span>
                                          
                                      </div>
                                      <div class="markdown-body">
                                        <h1 id="只需5MB浏览器也能可完成人脸-关键点检测"><a href="#只需5MB浏览器也能可完成人脸-关键点检测" class="headerlink" title="只需5MB浏览器也能可完成人脸+关键点检测"></a>只需5MB浏览器也能可完成人脸+关键点检测</h1><h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><p>本项目使用onnxruntime-web进行部署, 针对人脸检测和关键点检测筛选出算子进行重新编译, 对模型进行了量化。</p>
<p>在边缘设备(性能较差, 网络传输)部署很有用哦~!</p>
<p>量化有三种形式: 动态量化\静态量化\感知量化, 人脸检测模型使用了动态量化, 关键点模型没有进行量化,但是减少了模型参数.</p>
<iframe src="/webface" style="width: 100%; height: 800px; border: none; background-color: white;">
</iframe>


<h2 id="打开方式"><a href="#打开方式" class="headerlink" title="打开方式"></a>打开方式</h2><p><img src="/images/%E5%8F%AA%E9%9C%805MB%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B9%9F%E8%83%BD%E5%8F%AF%E5%AE%8C%E6%88%90%E4%BA%BA%E8%84%B8+%E5%85%B3%E9%94%AE%E7%82%B9%E6%A3%80%E6%B5%8B/assets/1729843884754.png" alt="1729843884754"></p>

                                      </div>
                                      
                                        <div class="prev-or-next">
                                          <div class="post-foot-next">
                                            
                                              <a href="/2024/06/16/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80%E5%A4%84%E7%90%86-Transformer%E6%A8%A1%E5%9E%8B/" target="_self">
                                                <i class="iconfont icon-chevronleft"></i>
                                                <span>
                                                  上一页
                                                </span>
                                              </a>
                                              
                                          </div>
                                          <div class="post-attach">
                                            <span class="post-pubtime">
                                              <i class="iconfont icon-updatetime mr-10"
                                                title="更新时间"></i>
                                              2024-10-25 16:14:41
                                            </span>
                                            
                                              <span class="post-tags">
                                                <i class="iconfont icon-tags mr-10" title="标签"></i>
                                                
                                                  <span class="span--tag mr-8">
                                                    <a href="/tags/%E4%BA%BA%E8%84%B8%E6%A3%80%E6%B5%8B/" title="人脸检测">
                                                      #人脸检测
                                                    </a>
                                                  </span>
                                                  
                                              </span>
                                              
                                          </div>
                                          <div class="post-foot-prev">
                                            
                                          </div>
                                        </div>
                                        
                                    </div>
                                    
  <div id="btn-catalog" class="btn-catalog">
    <i class="iconfont icon-catalog"></i>
  </div>
  <div class="post-catalog hidden" id="catalog">
    <div class="title">目录</div>
    <div class="catalog-content">
      
        <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%AA%E9%9C%805MB%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B9%9F%E8%83%BD%E5%8F%AF%E5%AE%8C%E6%88%90%E4%BA%BA%E8%84%B8-%E5%85%B3%E9%94%AE%E7%82%B9%E6%A3%80%E6%B5%8B"><span class="toc-text">只需5MB浏览器也能可完成人脸+关键点检测</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AE%80%E4%BB%8B"><span class="toc-text">简介</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%89%93%E5%BC%80%E6%96%B9%E5%BC%8F"><span class="toc-text">打开方式</span></a></li></ol></li></ol>
      
    </div>
  </div>

  
<script src="/js/catalog.js"></script>


                                        <div class="comments-container">
                                          

                                        </div>
                                        
                                  </div>
                                  

          <div id="blockchain"></div>
          <style>
            #hq {
              margin-top: 10px;
              margin-bottom: 10px;
              font-size: 18px;
            }

            #blockchain {
              margin: 0 auto;
              display: none;
              width: 590px;
              flex-direction: column;
              align-items: center;
              background: #ffffffa3;
              border-radius: 5px;
              padding: 5px 10px 10px 10px;
              margin-top: 20px;
            }

            #blockchain .htitle {
              display: flex;
              flex-direction: row;
              align-items: center;
              cursor: pointer;
            }

            #blockchain .hsubtitle {
              color: #555;
              transform: scale(0.8); /* 然后缩小至80% */
              transform-origin: 5px 12px; /* 可能需要指定缩放原点以确保准确缩放 */
            }

            #blockchain .himg {
              width: 25px;
              height: 25px;
              margin-right: 5px;
            }

            #blockchain tr, th {
              font-size: 1.7rem;
              font-weight: normal;
            }

            #blockchain tr, td {
              font-size: 1.6rem;
            }

            #blockchain tr, th, td {
              border: 1px solid #c7c7c7;
              padding: 3px 7px;
            }

            #blockchain table {
              border-collapse: collapse;
              width: 100%;
              font-size: 16px;
              font-family: arial;
            }

            @media (max-width: 800px) {
              #blockchain {
                margin: 0 auto;
                margin-top: 20px;
                display: none;
                /* justify-content: flex-start; */
                padding: 20px 10px;
                width: calc(100% - 40px);
                flex-direction: column;
                align-items: center;
              }
            }
          </style>

          
<script src="/js/axios.min.js"></script>

          <script>
            let ctoname = [
              "BTC",
              "ETH",
              "USDT",
              "BNB",
              "SOL",
              "USDC",
              "XRP",
              "DOGE",
              "ADA",
              "SHIB",
              "AVAX",
              "TRX",
              "DOT",
              "WBTC",
              "BCH",
              "LINK",
              "NEAR",
              "MATIC",
              "ICP",
              "LTC",
              "DAI",
              "UNI",
              "HBAR",
              "ETC",
              "APT",
              "FDUSD",
              "RNDR",
              "ATOM",
              "PEPE",
              "FIL"
            ];

            let ctoname2 = [
                "比特币",
                "以太坊",
                "泰达币",
                "币安币",
                "索拉纳",
                "美元硬币",
                "瑞波币",
                "狗狗币",
                "卡尔达诺",
                "柴犬币",
                "雪崩协议",
                "波场",
                "波卡",
                "包装比特币",
                "比特币现金",
                "链环",
                "近协议",
                "多边形",
                "互联网计算机",
                "莱特币",
                "戴",
                "Uniswap",
                "以太坊经典",
                "赫德拉哈希图",
                "阿普托斯",
                "第一数字美元",
                "渲染令牌",
                "佩佩",
                "宇宙",
                "文件币"
            ];

            let ctoname3 = [
                "Bitcoin",
                "Ethereum",
                "TetherUS",
                "BNB",
                "Solana",
                "USD Coin",
                "Ripple",
                "Dogecoin",
                "Cardano",
                "SHIBA INU",
                "Avalanche",
                "TRON",
                "Polkadot",
                "Wrapped Bitcoin",
                "Bitcoin Cash",
                "ChainLink",
                "NEAR Protocol",
                "Polygon",
                "Internet Computer",
                "Litecoin",
                "Dai",
                "Uniswap",
                "Ethereum Classic",
                "Hedera Hashgraph",
                "Aptos",
                "First Digital USD",
                "Render Token",
                "Pepe",
                "Cosmos",
                "Filecoin"
            ]

            let ctoname4 = [
                "比特币是一种去中心化的数字货币，它允许点对点交易，创建于2009年。",
                "以太坊是一个开源的区块链平台，支持智能合约和去中心化应用，推出于2015年。",
                "泰达币是一种与美元挂钩的稳定币，旨在保持1:1的美元价值。",
                "币安币是币安交易所发行的加密货币，用于支付交易费用和其他服务。",
                "索拉纳是一个高性能区块链平台，旨在提供快速、安全和可扩展的去中心化应用。",
                "USD Coin是一种与美元挂钩的稳定币，由Circle和Coinbase合作推出。",
                "瑞波币是一种由Ripple公司创建的加密货币，旨在促进银行间快速、低成本的跨境支付。",
                "狗狗币是一种基于模因的加密货币，起初作为玩笑创建，但后来因社区支持而流行。",
                "卡尔达诺是一个第三代区块链平台，致力于提供可持续和可扩展的去中心化应用。",
                "柴犬币是一种模仿狗狗币的加密货币，以其社区驱动的发展模式和广泛的在线社区而闻名。",
                "雪崩币是Avalanche区块链平台的原生代币，支持去中心化应用和金融资产。",
                "波场币是波场区块链的原生代币，旨在为数字娱乐产业提供去中心化的内容分享平台。",
                "波卡币是一个多链区块链平台，旨在实现不同区块链之间的互操作性。",
                "包装比特币是比特币在以太坊区块链上的代币化版本，使其能够用于DeFi应用。",
                "比特币现金是比特币的一个分叉，旨在通过增加区块大小来实现更快的交易速度。",
                "Chainlink是一个去中心化的预言机网络，旨在连接智能合约和现实世界的数据。",
                "近邻协议是一个高性能区块链，致力于提供去中心化应用的理想开发平台。",
                "Polygon是一个以太坊扩展解决方案，旨在提供快速、低成本的交易。",
                "Internet Computer是一个去中心化的区块链网络，旨在扩展互联网功能。",
                "莱特币是一种基于比特币协议的加密货币，具有更快的区块生成时间。",
                "Dai是一种由MakerDAO创建的去中心化稳定币，与美元挂钩。",
                "Uniswap是一个基于以太坊的去中心化交易所，允许用户进行代币交换。",
                "Hedera是一个去中心化的公有账本，使用哈希图共识算法。",
                "以太经典是以太坊的一个分叉，保持了原始以太坊链的历史记录。",
                "Aptos是一个新兴的区块链平台，旨在提供高效、安全的去中心化应用。",
                "First Digital USD是一种与美元挂钩的稳定币，旨在提供数字美元的替代方案。",
                "Render Token是一个分布式的GPU渲染网络，旨在提供高效的渲染服务。",
                "宇宙链是一个区块链网络，旨在实现不同区块链之间的互操作性。",
                "Pepe是一种模仿柴犬币的加密货币，以其社区驱动的发展模式而著名。",
                "文件币是一个去中心化的存储网络，旨在利用区块链技术提供安全的数据存储。"
            ];

            async function requestBlockChain() {
              const instance = axios.get("/blockchain")
              let jsonData = (await instance).data

              let table = `<h2 id='hq'>虚拟货币行情</h2>
                <div style="font-size: 1.5rem; font-weight: normal; padding: 0px 0px 10px 0px;">(美元对人民币汇率：${jsonData['exchange']})</div>
                <table border='1'>
                  <tr>
                    <th width="40%">虚拟货币</th>
                    <th width="30%">价格(人民币)</th>
                    <th width="30%">价格(美元)</th>
                  </tr>`;
              
              for (let i = 0; i <= 20; i++) {
                if (!jsonData['list'][ctoname[i]]) {
                  continue;
                }

                let rmb = Math.round(jsonData['list'][ctoname[i]] * jsonData['exchange'] * 100000) / 100000;
                let usd = jsonData['list'][ctoname[i]]

                table += `
                <tr>
                  <td>
                    <div class="htitle" title="${ctoname4[i]}">
                      <img class="himg" src="/images/BlockChain/${ctoname[i]}.jpg" />
                      ${ctoname[i]}
                      <span class="hsubtitle">
                        (${ctoname2[i]})
                      </span>
                    </div>
                  </td>
                  <td>${rmb}</td>
                  <td>${usd}</td>
                </tr>`;
              }

              // for (let currency in jsonData) {
              //   table += `<tr><td>${ctoname[currency].name}</td><td>${jsonData[currency]}</td></tr>`;
              // }
              table += "</table>";

              document.getElementById("blockchain").innerHTML = table;
              document.getElementById("blockchain").style.display = "flex"
            }

            requestBlockChain()
          </script>

          
<div class="footer">
  <div class="social">
    <ul>
      
        <li>
          <a title="github" href="">
            <i class="iconfont icon-"></i>
          </a>
        </li>
      
        <li>
          <a title="wechat" href="">
            <i class="iconfont icon-wechat"></i>
          </a>
        </li>
      
    </ul>
  </div>
  
    
    <div class="footer-more">
      
        <a target="_blank" rel="noopener" href="https://github.com/zchengsite/hexo-theme-oranges">Copyright © 2024 lijunjie</a>
        
    </div>
  
    
    <div class="footer-more">
      
        <a href="https://hahaha.love">Theme by Oranges | Powered by Lijunjie</a>
        
    </div>
  
  
</div>


<script async src="/plugins/consolevideo.js"></script>
        </div>

        <div class="tools-bar">
          <div class="back-to-top tools-bar-item hidden">
  <a href="javascript: void(0)">
    <i class="iconfont icon-chevronup"></i>
  </a>
</div>


<script src="/js/backtotop.js"></script>


  <div class="search-icon tools-bar-item" id="search-icon">
    <a href="javascript: void(0)">
      <i class="iconfont icon-search"></i>
    </a>
  </div>

  <div class="search-overlay hidden">
    <div class="search-content" tabindex="0">
      <div class="search-title">
        <span class="search-icon-input">
          <a href="javascript: void(0)">
            <i class="iconfont icon-search"></i>
          </a>
        </span>
        
          <input type="text" class="search-input" id="search-input" placeholder="搜索...">
        
        <span class="search-close-icon" id="search-close-icon">
          <a href="javascript: void(0)">
            <i class="iconfont icon-close"></i>
          </a>
        </span>
      </div>
      <div class="search-result" id="search-result"></div>
    </div>
  </div>

  <script type="text/javascript">
    var inputArea = document.querySelector("#search-input")
    var searchOverlayArea = document.querySelector(".search-overlay")

    inputArea.onclick = function() {
      getSearchFile()
      this.onclick = null
    }

    inputArea.onkeydown = function() {
      if(event.keyCode == 13)
        return false
    }

    function openOrHideSearchContent() {
      let isHidden = searchOverlayArea.classList.contains('hidden')
      if (isHidden) {
        searchOverlayArea.classList.remove('hidden')
        document.body.classList.add('hidden')
        // inputArea.focus()
      } else {
        searchOverlayArea.classList.add('hidden')
        document.body.classList.remove('hidden')
      }
    }

    function blurSearchContent(e) {
      if (e.target === searchOverlayArea) {
        openOrHideSearchContent()
      }
    }

    document.querySelector("#search-icon").addEventListener("click", openOrHideSearchContent, false)
    document.querySelector("#search-close-icon").addEventListener("click", openOrHideSearchContent, false)
    searchOverlayArea.addEventListener("click", blurSearchContent, false)

    var searchFunc = function (path, search_id, content_id) {
      'use strict';
      var $input = document.getElementById(search_id);
      var $resultContent = document.getElementById(content_id);
      $resultContent.innerHTML = "<ul><span class='local-search-empty'>首次搜索，正在载入索引文件，请稍后……<span></ul>";
      $.ajax({
        // 0x01. load xml file
        url: path,
        dataType: "xml",
        success: function (xmlResponse) {
          // 0x02. parse xml file
          var datas = $("entry", xmlResponse).map(function () {
            return {
              title: $("title", this).text(),
              content: $("content", this).text(),
              url: $("url", this).text()
            };
          }).get();
          $resultContent.innerHTML = "";

          $input.addEventListener('input', function () {
            // 0x03. parse query to keywords list
            var str = '<ul class=\"search-result-list\">';
            var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
            $resultContent.innerHTML = "";
            if (this.value.trim().length <= 0) {
              return;
            }
            // 0x04. perform local searching
            datas.forEach(function (data) {
              var isMatch = true;
              var content_index = [];
              if (!data.title || data.title.trim() === '') {
                data.title = "Untitled";
              }
              var orig_data_title = data.title.trim();
              var data_title = orig_data_title.toLowerCase();
              var orig_data_content = data.content.trim().replace(/<[^>]+>/g, "");
              var data_content = orig_data_content.toLowerCase();
              var data_url = data.url;
              var index_title = -1;
              var index_content = -1;
              var first_occur = -1;
              // only match artiles with not empty contents
              if (data_content !== '') {
                keywords.forEach(function (keyword, i) {
                  index_title = data_title.indexOf(keyword);
                  index_content = data_content.indexOf(keyword);

                  if (index_title < 0 && index_content < 0) {
                    isMatch = false;
                  } else {
                    if (index_content < 0) {
                      index_content = 0;
                    }
                    if (i == 0) {
                      first_occur = index_content;
                    }
                    // content_index.push({index_content:index_content, keyword_len:keyword_len});
                  }
                });
              } else {
                isMatch = false;
              }
              // 0x05. show search results
              if (isMatch) {
                str += "<li><a href='" + data_url + "' class='search-result-title'>" + orig_data_title + "</a>";
                var content = orig_data_content;
                if (first_occur >= 0) {
                  // cut out 100 characters
                  var start = first_occur - 20;
                  var end = first_occur + 80;

                  if (start < 0) {
                    start = 0;
                  }

                  if (start == 0) {
                    end = 100;
                  }

                  if (end > content.length) {
                    end = content.length;
                  }

                  var match_content = content.substr(start, end);

                  // highlight all keywords
                  keywords.forEach(function (keyword) {
                    var regS = new RegExp(keyword, "gi");
                    match_content = match_content.replace(regS, "<span class=\"search-keyword\">" + keyword + "</span>");
                  });

                  str += "<p class=\"search-result-abstract\">" + match_content + "...</p>"
                }
                str += "</li>";
              }
            });
            str += "</ul>";
            if (str.indexOf('<li>') === -1) {
              return $resultContent.innerHTML = "<ul><span class='local-search-empty'>没有找到内容，请尝试更换检索词。<span></ul>";
            }
            $resultContent.innerHTML = str;
          });
        },
        error: function(xhr, status, error) {
          $resultContent.innerHTML = ""
          if (xhr.status === 404) {
            $resultContent.innerHTML = "<ul><span class='local-search-empty'>未找到search.xml文件，具体请参考：<a href='https://github.com/zchengsite/hexo-theme-oranges#configuration' target='_black'>configuration</a><span></ul>";
          } else {
            $resultContent.innerHTML = "<ul><span class='local-search-empty'>请求失败，尝试重新刷新页面或稍后重试。<span></ul>";
          }
        }
      });
      $(document).on('click', '#search-close-icon', function() {
        $('#search-input').val('');
        $('#search-result').html('');
      });
    }

    var getSearchFile = function() {
        var path = "/search.xml";
        searchFunc(path, 'search-input', 'search-result');
    }
  </script>


        </div>
    </div>

  </body>

</html>