知来者逆
知来者逆

在浏览器里运行深度学习模型推理——C++与Wasm实现

前言

如果想要在浏览器运行代码，能使用的语言只有JavaScript ，因为在浏览器里配置了JavaScript 引擎用来负责解析和执行JavaScript 。但是，很多时候JavaScript并不适合我们想要实现的所有功能，比如想在浏览器运动C++、C或Rust等代码，那么WebAssembly则是目前最佳的选择。

一、 WebAssembly

WebAssembly（缩写WASM）是浏览器所能执行的一种新类型的代码，它的目标是为了在网络上获得更好的性能。 WASM是一种低层的二进制格式代码，体积小，因此加载和执行速度快。而且不用直接编写WASM的代码，它可以从高级语言（比如C++、C、Rust）编译而来。比如当前DAPP(mora星球)所在的ICP链也是把motoko或rust编写的智能合约编译成WebAssembly之后安装到Canister运行。
WebAssembly 在 web 中被设计成无版本、特性可测试、向后兼容的。WebAssembly 可以被 JavaScript 调用，进入 JavaScript 上下文，也可以像 Web API 一样调用浏览器的功能。当然，WebAssembly 不仅可以运行在浏览器上，也可以运行在非web环境下。emscripten可以将C/C++代码可以通过编译为 webassembly。

二、计算机视觉

计算机视觉给人类生活带很多方便，但也有很多数据安全方面的问题，比如应用在安防上的网络摄像头，当摄像头检测到的画面要回传到服务器才能检测出当面视频流属于什么状态。举个例子，应用于智慧城市的安防摄像头，它要检测当前画面是否有人在禁止吸烟的区域吸烟了，工人进入工地时是否做了安全防护措拖，是否有起烟或者火灾的现象，如果要把图像时时回传服务器才做检测，这样可能会引起数据安全隐私问题。
这里使用WebAssembly做推理就可以解决实现在浏览器就把结果检测出来，只要把结果给传递给处理中心就可以了，用户数据不会上传，保护用户隐私。部署起来也简单，只要安装浏览器就行，无客户端。
那么现在可以把一个目标识别的算法部署到浏览器上运行试试，当前代码所使用的语言为C++，目标检测算法是YOLOV5,用到图像算法库OpenCV,推理加速库是NCNN。

三、编译环境配置

当前测试的环境为Mac,浏览器为google chrome,首先要安装emscripten用来编译C++代码。

1.安装emscripten

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install 2.0.8
./emsdk activate 2.0.8
source emsdk/emsdk_env.sh

2.下载NCNN库

wget https://github.com/Tencent/ncnn/releases/download/20220216/ncnn-20220216-webassembly.zip
unzip ncnn-20220216-webassembly.zip

四、工程

1.工程资源
工程使用的模型是yolov5的模型，原模型是onnx格式的，要用使用ncnn转换成ncnn模型，关于模型训练和模型转换，可以参考ncnn的git和yolov5的git。

2.工程后端代码
yolov5.h


```cpp
#ifndef YOLOV5_H
#define YOLOV5_H

#include 
#include 

struct Object
{
    cv::Rect_<float> rect;
    int label;
    float prob;
};

class YOLOv5
{
public:
    YOLOv5();

    int load();

    int detect(const cv::Mat& rgba, std::vector<Object>& objects, float prob_threshold = 0.4f, float nms_threshold = 0.5f);

    int draw(cv::Mat& rgba, const std::vector<Object>& objects);

private:
    ncnn::Net yolov5;
};

#endif // YOLOV5_H


yolov5.cpp

```cpp
#include "yolov5.h"

#include 
#include 
#include 

static inline float intersection_area(const Object& a, const Object& b)
{
    cv::Rect_ inter = a.rect & b.rect;
    return inter.area();
}

static void qsort_descent_inplace(std::vector& faceobjects, int left, int right)
{
    int i = left;
    int j = right;
    float p = faceobjects[(left + right) / 2].prob;

    while (i <= j)
    {
        while (faceobjects[i].prob > p)
            i++;

        while (faceobjects[j].prob < p)
            j--;

        if (i <= j)
        {
            // swap
            std::swap(faceobjects[i], faceobjects[j]);

            i++;
            j--;
        }
    }

    //     #pragma omp parallel sections
    {
        //         #pragma omp section
        {
            if (left < j) qsort_descent_inplace(faceobjects, left, j);
        }
        //         #pragma omp section
        {
            if (i < right) qsort_descent_inplace(faceobjects, i, right);
        }
    }
}

static void qsort_descent_inplace(std::vector& faceobjects)
{
    if (faceobjects.empty())
        return;

    qsort_descent_inplace(faceobjects, 0, faceobjects.size() - 1);
}

static void nms_sorted_bboxes(const std::vector& faceobjects, std::vector& picked, float nms_threshold)
{
    picked.clear();

    const int n = faceobjects.size();

    std::vector areas(n);
    for (int i = 0; i < n; i++)
    {
        areas[i] = faceobjects[i].rect.width * faceobjects[i].rect.height;
    }

    for (int i = 0; i < n; i++)
    {
        const Object& a = faceobjects[i];

        int keep = 1;
        for (int j = 0; j < (int)picked.size(); j++)
        {
            const Object& b = faceobjects[picked[j]];

            // intersection over union
            float inter_area = intersection_area(a, b);
            float union_area = areas[i] + areas[picked[j]] - inter_area;
            // float IoU = inter_area / union_area
            if (inter_area / union_area > nms_threshold)
                keep = 0;
        }

        if (keep)
            picked.push_back(i);
    }
}

static inline float sigmoid(float x)
{
    return static_cast(1.f / (1.f + exp(-x)));
}

static void generate_proposals(const ncnn::Mat& anchors, int stride, const ncnn::Mat& in_pad, const ncnn::Mat& feat_blob, float prob_threshold, std::vector& objects)
{
    const int num_grid_x = feat_blob.w;
    const int num_grid_y = feat_blob.h;

    const int num_anchors = anchors.w / 2;

    const int num_class = 80;

    for (int q = 0; q < num_anchors; q++)
    {
        const float anchor_w = anchors[q * 2];
        const float anchor_h = anchors[q * 2 + 1];

        for (int i = 0; i < num_grid_y; i++)
        {
            for (int j = 0; j < num_grid_x; j++)
            {
                // find class index with max class score
                int class_index = 0;
                float class_score = -FLT_MAX;
                for (int k = 0; k < num_class; k++)
                {
                    float score = feat_blob.channel(q * 85 + 5 + k).row(i)[j];
                    if (score > class_score)
                    {
                        class_index = k;
                        class_score = score;
                    }
                }

                float box_score = feat_blob.channel(q * 85 + 4).row(i)[j];

                float confidence = sigmoid(box_score) * sigmoid(class_score);

                if (confidence >= prob_threshold)
                {
                    // yolov5/models/yolo.py Detect forward
                    // y = x[i].sigmoid()
                    // y[..., 0:2] = (y[..., 0:2] * 2. - 0.5 + self.grid[i].to(x[i].device)) * self.stride[i]  # xy
                    // y[..., 2:4] = (y[..., 2:4] * 2) ** 2 * self.anchor_grid[i]  # wh

                    float dx = sigmoid(feat_blob.channel(q * 85 + 0).row(i)[j]);
                    float dy = sigmoid(feat_blob.channel(q * 85 + 1).row(i)[j]);
                    float dw = sigmoid(feat_blob.channel(q * 85 + 2).row(i)[j]);
                    float dh = sigmoid(feat_blob.channel(q * 85 + 3).row(i)[j]);

                    float pb_cx = (dx * 2.f - 0.5f + j) * stride;
                    float pb_cy = (dy * 2.f - 0.5f + i) * stride;

                    float pb_w = pow(dw * 2.f, 2) * anchor_w;
                    float pb_h = pow(dh * 2.f, 2) * anchor_h;

                    float x0 = pb_cx - pb_w * 0.5f;
                    float y0 = pb_cy - pb_h * 0.5f;
                    float x1 = pb_cx + pb_w * 0.5f;
                    float y1 = pb_cy + pb_h * 0.5f;

                    Object obj;
                    obj.rect.x = x0;
                    obj.rect.y = y0;
                    obj.rect.width = x1 - x0;
                    obj.rect.height = y1 - y0;
                    obj.label = class_index;
                    obj.prob = confidence;

                    objects.push_back(obj);
                }
            }
        }
    }
}

YOLOv5::YOLOv5()
{
}

int YOLOv5::load()
{
    yolov5.clear();

    ncnn::set_cpu_powersave(2);
    ncnn::set_omp_num_threads(ncnn::get_big_cpu_count());

    yolov5.opt.num_threads = ncnn::get_big_cpu_count();

    yolov5.load_param("yolov5n.ncnn.param");
    yolov5.load_model("yolov5n.ncnn.bin");

    return 0;
}

int YOLOv5::detect(const cv::Mat& rgba, std::vector& objects, float prob_threshold, float nms_threshold)
{
    int width = rgba.cols;
    int height = rgba.rows;

    const int target_size = 320;
    const int max_stride = 64;

    // pad to multiple of max_stride
    int w = width;
    int h = height;
    float scale = 1.f;
    if (w > h)
    {
        scale = (float)target_size / w;
        w = target_size;
        h = h * scale;
    }
    else
    {
        scale = (float)target_size / h;
        h = target_size;
        w = w * scale;
    }

    ncnn::Mat in = ncnn::Mat::from_pixels_resize(rgba.data, ncnn::Mat::PIXEL_RGBA2RGB, width, height, w, h);

    // pad to target_size rectangle
    int wpad = (w + max_stride - 1) / max_stride * max_stride - w;
    int hpad = (h + max_stride - 1) / max_stride * max_stride - h;
    ncnn::Mat in_pad;
    ncnn::copy_make_border(in, in_pad, hpad / 2, hpad - hpad / 2, wpad / 2, wpad - wpad / 2, ncnn::BORDER_CONSTANT, 114.f);

    const float norm_vals[3] = {1 / 255.f, 1 / 255.f, 1 / 255.f};
    in_pad.substract_mean_normalize(0, norm_vals);

    ncnn::Extractor ex = yolov5.create_extractor();

    ex.input("in0", in_pad);

    std::vector proposals;

    // anchor setting from yolov5/models/yolov5s.yaml

    // stride 8
    {
        ncnn::Mat out;
        ex.extract("out0", out);

        ncnn::Mat anchors(6);
        anchors[0] = 10.f;
        anchors[1] = 13.f;
        anchors[2] = 16.f;
        anchors[3] = 30.f;
        anchors[4] = 33.f;
        anchors[5] = 23.f;

        std::vector objects8;
        generate_proposals(anchors, 8, in_pad, out, prob_threshold, objects8);

        proposals.insert(proposals.end(), objects8.begin(), objects8.end());
    }

    // stride 16
    {
        ncnn::Mat out;
        ex.extract("out1", out);

        ncnn::Mat anchors(6);
        anchors[0] = 30.f;
        anchors[1] = 61.f;
        anchors[2] = 62.f;
        anchors[3] = 45.f;
        anchors[4] = 59.f;
        anchors[5] = 119.f;

        std::vector objects16;
        generate_proposals(anchors, 16, in_pad, out, prob_threshold, objects16);

        proposals.insert(proposals.end(), objects16.begin(), objects16.end());
    }

    // stride 32
    {
        ncnn::Mat out;
        ex.extract("out2", out);

        ncnn::Mat anchors(6);
        anchors[0] = 116.f;
        anchors[1] = 90.f;
        anchors[2] = 156.f;
        anchors[3] = 198.f;
        anchors[4] = 373.f;
        anchors[5] = 326.f;

        std::vector objects32;
        generate_proposals(anchors, 32, in_pad, out, prob_threshold, objects32);

        proposals.insert(proposals.end(), objects32.begin(), objects32.end());
    }

    // sort all proposals by score from highest to lowest
    qsort_descent_inplace(proposals);

    // apply nms with nms_threshold
    std::vector picked;
    nms_sorted_bboxes(proposals, picked, nms_threshold);

    int count = picked.size();

    objects.resize(count);
    for (int i = 0; i < count; i++)
    {
        objects[i] = proposals[picked[i]];

        // adjust offset to original unpadded
        float x0 = (objects[i].rect.x - (wpad / 2)) / scale;
        float y0 = (objects[i].rect.y - (hpad / 2)) / scale;
        float x1 = (objects[i].rect.x + objects[i].rect.width - (wpad / 2)) / scale;
        float y1 = (objects[i].rect.y + objects[i].rect.height - (hpad / 2)) / scale;

        // clip
        x0 = std::max(std::min(x0, (float)(width - 1)), 0.f);
        y0 = std::max(std::min(y0, (float)(height - 1)), 0.f);
        x1 = std::max(std::min(x1, (float)(width - 1)), 0.f);
        y1 = std::max(std::min(y1, (float)(height - 1)), 0.f);

        objects[i].rect.x = x0;
        objects[i].rect.y = y0;
        objects[i].rect.width = x1 - x0;
        objects[i].rect.height = y1 - y0;
    }

    // sort objects by area
    struct
    {
        bool operator()(const Object& a, const Object& b) const
        {
            return a.rect.area() > b.rect.area();
        }
    } objects_area_greater;
    std::sort(objects.begin(), objects.end(), objects_area_greater);

    return 0;
}

int YOLOv5::draw(cv::Mat& rgba, const std::vector& objects)
{
    static const char* class_names[] = {
        "person", "bicycle", "car", "motorcycle", "airplane", "bus", "train", "truck", "boat", "traffic light",
        "fire hydrant", "stop sign", "parking meter", "bench", "bird", "cat", "dog", "horse", "sheep", "cow",
        "elephant", "bear", "zebra", "giraffe", "backpack", "umbrella", "handbag", "tie", "suitcase", "frisbee",
        "skis", "snowboard", "sports ball", "kite", "baseball bat", "baseball glove", "skateboard", "surfboard",
        "tennis racket", "bottle", "wine glass", "cup", "fork", "knife", "spoon", "bowl", "banana", "apple",
        "sandwich", "orange", "broccoli", "carrot", "hot dog", "pizza", "donut", "cake", "chair", "couch",
        "potted plant", "bed", "dining table", "toilet", "tv", "laptop", "mouse", "remote", "keyboard", "cell phone",
        "microwave", "oven", "toaster", "sink", "refrigerator", "book", "clock", "vase", "scissors", "teddy bear",
        "hair drier", "toothbrush"
    };

    static const unsigned char colors[19][3] = {
        { 54,  67, 244},
        { 99,  30, 233},
        {176,  39, 156},
        {183,  58, 103},
        {181,  81,  63},
        {243, 150,  33},
        {244, 169,   3},
        {212, 188,   0},
        {136, 150,   0},
        { 80, 175,  76},
        { 74, 195, 139},
        { 57, 220, 205},
        { 59, 235, 255},
        {  7, 193, 255},
        {  0, 152, 255},
        { 34,  87, 255},
        { 72,  85, 121},
        {158, 158, 158},
        {139, 125,  96}
    };

    int color_index = 0;

    for (size_t i = 0; i < objects.size(); i++)
    {
        const Object& obj = objects[i];

//         fprintf(stderr, "%d = %.5f at %.2f %.2f %.2f x %.2f\n", obj.label, obj.prob,
//                 obj.rect.x, obj.rect.y, obj.rect.width, obj.rect.height);

        const unsigned char* color = colors[color_index % 19];
        color_index++;

        cv::Scalar cc(color[0], color[1], color[2], 255);

        cv::rectangle(rgba, cv::Rect(obj.rect.x, obj.rect.y, obj.rect.width, obj.rect.height), cc, 2);

        char text[256];
        sprintf(text, "%s %.1f%%", class_names[obj.label], obj.prob * 100);

        int baseLine = 0;
        cv::Size label_size = cv::getTextSize(text, cv::FONT_HERSHEY_SIMPLEX, 0.5, 1, &baseLine);

        int x = obj.rect.x;
        int y = obj.rect.y - label_size.height - baseLine;
        if (y < 0)
            y = 0;
        if (x + label_size.width > rgba.cols)
            x = rgba.cols - label_size.width;

        cv::rectangle(rgba, cv::Rect(cv::Point(x, y), cv::Size(label_size.width, label_size.height + baseLine)), cc, -1);

        cv::Scalar textcc = (color[0] + color[1] + color[2] >= 381) ? cv::Scalar(0, 0, 0, 255) : cv::Scalar(255, 255, 255, 255);

        cv::putText(rgba, text, cv::Point(x, y + label_size.height), cv::FONT_HERSHEY_SIMPLEX, 0.5, textcc, 1);
    }

    return 0;
}
 
  
运行效果：
 
 
  
4.交互代码
 
  

```cpp
#include 
#include 
#include "yolov5.h"

static int draw_fps(cv::Mat& rgba)
{
    // resolve moving average
    float avg_fps = 0.f;
    {
        static double t0 = 0.f;
        static float fps_history[10] = {0.f};

        double t1 = ncnn::get_current_time();
        if (t0 == 0.f)
        {
            t0 = t1;
            return 0;
        }

        float fps = 1000.f / (t1 - t0);
        t0 = t1;

        for (int i = 9; i >= 1; i--)
        {
            fps_history[i] = fps_history[i - 1];
        }
        fps_history[0] = fps;

        if (fps_history[9] == 0.f)
        {
            return 0;
        }

        for (int i = 0; i < 10; i++)
        {
            avg_fps += fps_history[i];
        }
        avg_fps /= 10.f;
    }

    char text[32];
    sprintf(text, "FPS=%.2f", avg_fps);

    int baseLine = 0;
    cv::Size label_size = cv::getTextSize(text, cv::FONT_HERSHEY_SIMPLEX, 0.5, 1, &baseLine);

    int y = 0;
    int x = rgba.cols - label_size.width;

    cv::rectangle(rgba, cv::Rect(cv::Point(x, y), cv::Size(label_size.width, label_size.height + baseLine)),
                    cv::Scalar(255, 255, 255, 255), -1);

    cv::putText(rgba, text, cv::Point(x, y + label_size.height),
                cv::FONT_HERSHEY_SIMPLEX, 0.5, cv::Scalar(0, 0, 0, 255));

    return 0;
}

static YOLOv5* g_yolov5 = 0;

static void on_image_render(cv::Mat& rgba)
{
    if (!g_yolov5)
    {
        g_yolov5 = new YOLOv5;

        g_yolov5->load();
    }

    std::vector<Object> objects;
    g_yolov5->detect(rgba, objects);

    g_yolov5->draw(rgba, objects);

    draw_fps(rgba);
}

#ifdef __EMSCRIPTEN_PTHREADS__

static const unsigned char* rgba_data = 0;
static int w = 0;
static int h = 0;

static ncnn::Mutex lock;
static ncnn::ConditionVariable condition;

static ncnn::Mutex finish_lock;
static ncnn::ConditionVariable finish_condition;

static void worker()
{
    while (1)
    {
        lock.lock();
        while (rgba_data == 0)
        {
            condition.wait(lock);
        }

        cv::Mat rgba(h, w, CV_8UC4, (void*)rgba_data);

        on_image_render(rgba);

        rgba_data = 0;

        lock.unlock();

        finish_lock.lock();
        finish_condition.signal();
        finish_lock.unlock();
    }
}

#include 
static std::thread t(worker);

extern "C" {

void yolov5_ncnn(unsigned char* _rgba_data, int _w, int _h)
{
    lock.lock();
    while (rgba_data != 0)
    {
        condition.wait(lock);
    }

    rgba_data = _rgba_data;
    w = _w;
    h = _h;

    lock.unlock();

    condition.signal();

    // wait for finished
    finish_lock.lock();
    while (rgba_data != 0)
    {
        finish_condition.wait(finish_lock);
    }
    finish_lock.unlock();
}

}

#else // __EMSCRIPTEN_PTHREADS__

extern "C" {

void yolov5_ncnn(unsigned char* rgba_data, int w, int h)
{
    cv::Mat rgba(h, w, CV_8UC4, (void*)rgba_data);

    on_image_render(rgba);
}

}

#endif // __EMSCRIPTEN_PTHREADS__

 
  

5.前端代码
index.html


```html



    
    
    ncnn webassembly yolov5
    




    

        
ncnn webassembly yolov5

        

            
        

        

            
        

        
    


    

    





 
  
6.make文件
 
  
project(yolov5)

cmake_minimum_required(VERSION 3.10)

set(CMAKE_BUILD_TYPE release)

if(NOT WASM_FEATURE)
    message(FATAL_ERROR "You must pass cmake option -DWASM_FEATURE and possible values are basic, simd, threads and simd-threads")
endif()

set(ncnn_DIR "${CMAKE_CURRENT_SOURCE_DIR}/ncnn/${WASM_FEATURE}/lib/cmake/ncnn")
find_package(ncnn REQUIRED)

set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} -s FORCE_FILESYSTEM=1 -s INITIAL_MEMORY=256MB -s EXIT_RUNTIME=1")
set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -s FORCE_FILESYSTEM=1 -s INITIAL_MEMORY=256MB -s EXIT_RUNTIME=1")
set(CMAKE_EXECUTBLE_LINKER_FLAGS "${CMAKE_EXECUTBLE_LINKER_FLAGS} -s FORCE_FILESYSTEM=1 -s INITIAL_MEMORY=256MB -s EXIT_RUNTIME=1")

set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} -sEXPORTED_FUNCTIONS=['_yolov5_ncnn'] --preload-file ${CMAKE_CURRENT_SOURCE_DIR}/assets@.")
set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -sEXPORTED_FUNCTIONS=['_yolov5_ncnn'] --preload-file ${CMAKE_CURRENT_SOURCE_DIR}/assets@.")
set(CMAKE_EXECUTBLE_LINKER_FLAGS "${CMAKE_EXECUTBLE_LINKER_FLAGS} -sEXPORTED_FUNCTIONS=['_yolov5_ncnn'] --preload-file ${CMAKE_CURRENT_SOURCE_DIR}/assets@.")

if(${WASM_FEATURE} MATCHES "threads")
    set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} -fopenmp -pthread -s USE_PTHREADS=1 -s PTHREAD_POOL_SIZE=4")
    set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -fopenmp -pthread -s USE_PTHREADS=1 -s PTHREAD_POOL_SIZE=4")
    set(CMAKE_EXE_LINKER_FLAGS "${CMAKE_EXE_LINKER_FLAGS} -fopenmp -pthread -s USE_PTHREADS=1 -s PTHREAD_POOL_SIZE=4")
endif()

add_executable(yolov5-${WASM_FEATURE} yolov5.cpp yolov5ncnn.cpp)
target_link_libraries(yolov5-${WASM_FEATURE} ncnn)

 
  
五、编译工程
 
  
1.工程包含文件
 image.pngassets里面模型文件,ncnn目录是刚刚下载的ncnn依赖库。
 在这里插入图片描述
 2.build
 在build前把emsdk环境启动。
 
  
source emsdk/emsdk_env.sh

 
  
在工程目录下添加一个build目录
 
  
mkdir build

 
  
编译项目
 
  
cd build
cmake -DCMAKE_TOOLCHAIN_FILE=$EMSDK/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake -DWASM_FEATURE=basic ..
make -j4
cmake -DCMAKE_TOOLCHAIN_FILE=$EMSDK/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake -DWASM_FEATURE=simd ..
make -j4
cmake -DCMAKE_TOOLCHAIN_FILE=$EMSDK/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake -DWASM_FEATURE=threads ..
make -j4
cmake -DCMAKE_TOOLCHAIN_FILE=$EMSDK/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake -DWASM_FEATURE=simd-threads ..
make -j4

 
  
3.启动服务
 创建一个server的目录，在目录里面添加一个python的微服务器用来测试。
 
  
mkdir server
cd server
vim server.py

 
  
server.py
 
  
from http.server import HTTPServer, SimpleHTTPRequestHandler
import ssl, os
os.system("openssl req -nodes -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -subj '/CN=mylocalhost'")
port = 8888
httpd = HTTPServer(('0.0.0.0', port), SimpleHTTPRequestHandler)
httpd.socket = ssl.wrap_socket(httpd.socket, keyfile='key.pem', certfile="cert.pem", server_side=True)
print(f"Server running on https://0.0.0.0:{port}")
httpd.serve_forever()

 
  
把bulid目录下的除了和make相关的文件都移动到server目录下：
 在浏览器里运行深度学习模型推理——C++与Wasm实现_第1张图片
 image.png把工程目录的的index.html和wasmFeatureDetect.js也移动到server目录。
 
  
运行server.py
 
  
python3 server.py

 
  
在浏览器里运行深度学习模型推理——C++与Wasm实现_第2张图片
 image.png打开浏览器，输入服务器地址，如果出现安全连接问题
 在浏览器里运行深度学习模型推理——C++与Wasm实现_第3张图片
 
  
在Chrome提示“您的连接不是私密连接”页面的空白区域点击一下，然后输入“thisisunsafe”(页面不会有任何输入提示)，输入完成后会自动继续访问。
 
  
输入正确则跳到检测界面：
 在浏览器里运行深度学习模型推理——C++与Wasm实现_第4张图片
 整体演示完成。
 
  

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    
                

            
        
    
    

        
你可能感兴趣的:(web,智能算法,wasm,深度学习,人工智能,后端)

        

            

                
    
                    
  • 机器学习与深度学习间关系与区别
                        ℒℴѵℯ心·动ꦿ໊ོ꫞
人工智能学习深度学习python
                        
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
    
                    
    • 
                    
  • 理解Gunicorn：Python WSGI服务器的基石
                        范范0825
ipythonlinux运维
                        
    理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
    
                    
    • 
                    
  • Long类型前后端数据不一致
                        igotyback
前端
                        
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
    
                    
    • 
                    
  • Google earth studio 简介
                        陟彼高冈yu
旅游
                        
    GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G
    
                    
    • 
                    
  • 将cmd中命令输出保存为txt文本文件
                        落难Coder
Windowscmdwindow
                        
    最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再
    
                    
    • 
                    
  • PHP环境搭建详细教程
                        好看资源平台
前端php
                        
    PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这
    
                    
    • 
                    
  • 使用 FinalShell 进行远程连接（ssh 远程连接 Linux 服务器）
                        编程经验分享
开发工具服务器sshlinux
                        
    目录前言基本使用教程新建远程连接连接主机自定义命令路由追踪前言后端开发，必然需要和服务器打交道，部署应用，排查问题，查看运行日志等等。一般服务器都是集中部署在机房中，也有一些直接是云服务器，总而言之，程序员不可能直接和服务器直接操作，一般都是通过ssh连接来登录服务器。刚接触远程连接时，使用的是XSHELL来远程连接服务器，连接上就能够操作远程服务器了，但是仅用XSHELL并没有上传下载文件的功能
    
                    
    • 
                    
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理
                        STU学生网页设计
网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
                        
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
    
                    
    • 
                    
  • 探索OpenAI和LangChain的适配器集成：轻松切换模型提供商
                        nseejrukjhad
langchaineasyui前端python
                        
    #探索OpenAI和LangChain的适配器集成：轻松切换模型提供商##引言在人工智能和自然语言处理的世界中，OpenAI的模型提供了强大的能力。然而，随着技术的发展，许多人开始探索其他模型以满足特定需求。LangChain作为一个强大的工具，集成了多种模型提供商，通过提供适配器，简化了不同模型之间的转换。本篇文章将介绍如何使用LangChain的适配器与OpenAI集成，以便轻松切换模型提供商
    
                    
    • 
                    
  • 深入理解 MultiQueryRetriever：提升向量数据库检索效果的强大工具
                        nseejrukjhad
数据库python
                        
    深入理解MultiQueryRetriever：提升向量数据库检索效果的强大工具引言在人工智能和自然语言处理领域，高效准确的信息检索一直是一个关键挑战。传统的基于距离的向量数据库检索方法虽然广泛应用，但仍存在一些局限性。本文将介绍一种创新的解决方案：MultiQueryRetriever，它通过自动生成多个查询视角来增强检索效果，提高结果的相关性和多样性。MultiQueryRetriever的工
    
                    
    • 
                    
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
                        二挡起步
web前端期末大作业javascripthtmlcss旅游风景
                        
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
    
                    
    • 
                    
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动
                        二挡起步
web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
                        
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
    
                    
    • 
                    
  • git - Webhook让部署自动化
                        大猪大猪

                        
    我们现在有一个需求，将项目打包上传到gitlab或者github后，程序能自动部署，不用手动地去服务器中进行项目更新并运行，如何做到？这里我们可以使用gitlab与github的挂钩，挂钩的原理就是，每当我们有请求到gitlab与github服务器时，这时他俩会根据我们配置的挂钩地扯进行访问，webhook挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时
    
                    
    • 
                    
  • 人工智能时代，程序员如何保持核心竞争力？
                        jmoych
人工智能
                        
    随着AIGC（如chatgpt、midjourney、claude等）大语言模型接二连三的涌现，AI辅助编程工具日益普及，程序员的工作方式正在发生深刻变革。有人担心AI可能取代部分编程工作，也有人认为AI是提高效率的得力助手。面对这一趋势,程序员应该如何应对?是专注于某个领域深耕细作，还是广泛学习以适应快速变化的技术环境?又或者，我们是否应该将重点转向AI无法轻易替代的软技能？让我们一起探讨程序员
    
                    
    • 
                    
  • webpack图片等资源的处理
                        dmengmeng

                        
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
    
                    
    • 
                    
  • Low Power概念介绍-Voltage Area
                        飞奔的大虎

                        
    随着智能手机，以及物联网的普及，芯片功耗的问题最近几年得到了越来越多的重视。为了实现集成电路的低功耗设计目标，我们需要在系统设计阶段就采用低功耗设计的方案。而且，随着设计流程的逐步推进，到了芯片后端设计阶段，降低芯片功耗的方法已经很少了，节省的功耗百分比也不断下降。芯片的功耗主要由静态功耗（staticleakagepower）和动态功耗(dynamicpower)构成。静态功耗主要是指电路处于等
    
                    
    • 
                    
  • 数字里的世界17期：2021年全球10大顶级数据中心，中国移动榜首
                        张三叨

                        
    你知道吗？2016年，全球的数据中心共计用电4160亿千瓦时，比整个英国的发电量还多40％！前言每天，我们都会创造超过250万TB的数据。并且随着物联网（IOT）的不断普及，这一数据将持续增长。如此庞大的数据被存储在被称为“数据中心”的专用设施中。虽然最早的数据中心建于20世纪40年代，但直到1997-2000年的互联网泡沫期间才逐渐成为主流。当前人类的技术，比如人工智能和机器学习，已经将我们推向
    
                    
    • 
                    
  • 「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验
                        张风捷特烈
iderust开发语言后端
                        
    theme:cyanosis我正在参加「豆包MarsCode初体验」征文活动MarsCode可以看作一个运行在服务端的远程VSCode开发环境。对于我这种想要学习体验某些语言，但不想在电脑里装环境的人来说非常友好。本文就来介绍一下在MarsCode里，我的体验rust开发体验。一、MarsCode是什么它的本质是:提供代码助手和云端IDE服务的web网站，可通过下面的链接访问https://www
    
                    
    • 
                    
  • Python神器！WEB自动化测试集成工具 DrissionPage
                        亚丁号
python开发语言
                        
    一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率
    
                    
    • 
                    
  • Java爬虫框架（一）--架构设计
                        狼图腾-狼之传说
java框架java任务html解析器存储电子商务
                        
    一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast
    
                    
    • 
                    
  • Java：爬虫框架
                        dingcho
Javajava爬虫
                        
    一、ApacheNutch2【参考地址】Nutch是一个开源Java实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。Nutch致力于让每个人能很容易,同时花费很少就可以配置世界一流的Web搜索引擎.为了完成这一宏伟的目标,Nutch必须能够做到:每个月取几十亿网页为这些网页维护一个索引对索引文件进行每秒上千次的搜索提供高质量的搜索结果简单来说Nutch支持分
    
                    
    • 
                    
  • MongoDB知识概括
                        GeorgeLin98
持久层mongodb
                        
    MongoDB知识概括MongoDB相关概念单机部署基本常用命令索引-IndexSpirngDataMongoDB集成副本集分片集群安全认证MongoDB相关概念业务应用场景：传统的关系型数据库（如MySQL），在数据操作的“三高”需求以及应对Web2.0的网站需求面前，显得力不从心。解释：“三高”需求：①Highperformance-对数据库高并发读写的需求。②HugeStorage-对海量数
    
                    
    • 
                    
  • springboot+vue项目实战一-创建SpringBoot简单项目
                        苹果酱0567
面试题汇总与解析springboot后端java中间件开发语言
                        
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
    
                    
    • 
                    
  • uniapp map组件自定义markers标记点
                        以对_
uni-app学习记录uni-appjavascript前端
                        
    需求是根据后端返回数据在地图上显示标记点，并且根据数据状态控制标记点颜色，标记点背景通过两张图片实现控制{{item.options.labelName}}exportdefault{data(){return{storeIndex:0,locaInfo:{longitude:120.445172,latitude:36.111387},markers:[//标点列表{id:1,//标记点idin
    
                    
    • 
                    
  • Python实现下载当前年份的谷歌影像
                        sand&wich
python开发语言
                        
    在GIS项目和地图应用中，获取最新的地理影像数据是非常重要的。本文将介绍如何使用Python代码从Google地图自动下载当前年份的影像数据，并将其保存为高分辨率的TIFF格式文件。这个过程涉及地理坐标转换、多线程下载和图像处理。关键功能该脚本的核心功能包括：坐标转换：支持WGS-84与WebMercator投影之间转换，以及处理中国GCJ-02偏移。自动化下载：多线程下载地图瓦片，提高效率。图像
    
                    
    • 
                    
  • 笋丁网页自动回复机器人V3.0.0免授权版源码
                        希希分享
软希网58soho_cn源码资源笋丁网页自动回复机器人
                        
    笋丁网页机器人一款可设置自动回复，默认消息，调用自定义api接口的网页机器人。此程序后端语言使用Golang，内存占用最高不超过30MB，1H1G服务器流畅运行。仅支持Linux服务器部署，不支持虚拟主机，请悉知！使用自定义api功能需要有一定的建站基础。源码下载：https://download.csdn.net/download/m0_66047725/89754250更多资源下载：关注我。安
    
                    
    • 
                    
  • Spring MVC 全面指南：从入门到精通的详细解析
                        一杯梅子酱
技术栈学习springmvcjava
                        
    引言：SpringMVC，作为Spring框架的一个重要模块，为构建Web应用提供了强大的功能和灵活性。无论是初学者还是有一定经验的开发者，掌握SpringMVC都将显著提升你的Web开发技能。本文旨在为初学者提供一个全面且易于理解的学习路径，通过详细的知识点分析和实际案例，帮助你快速上手SpringMVC，让学习过程既深刻又高效。一、SpringMVC简介1.1什么是SpringMVC？Spri
    
                    
    • 
                    
  • Spring Boot中实现跨域请求
                        BABA8891
springboot后端java
                        
    在SpringBoot中实现跨域请求（CORS，Cross-OriginResourceSharing）可以通过多种方式，以下是几种常见的方法：1.使用@CrossOrigin注解在SpringBoot中，你可以在控制器或者具体的请求处理方法上使用@CrossOrigin注解来允许跨域请求。在控制器上应用：importorg.springframework.web.bind.annotation.
    
                    
    • 
                    
  • WebMagic：强大的Java爬虫框架解析与实战
                        Aaron_945
Javajava爬虫开发语言
                        
    文章目录引言官网链接WebMagic原理概述基础使用1.添加依赖2.编写PageProcessor高级使用1.自定义Pipeline2.分布式抓取优点结论引言在大数据时代，网络爬虫作为数据收集的重要工具，扮演着不可或缺的角色。Java作为一门广泛使用的编程语言，在爬虫开发领域也有其独特的优势。WebMagic是一个开源的Java爬虫框架，它提供了简单灵活的API，支持多线程、分布式抓取，以及丰富的
    
                    
    • 
                    
  • 博客网站制作教程
                        2401_85194651
javamaven
                        
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
    
                    
    • 
                                
  • Maven
                                    Array_06
eclipsejdkmaven
                                    
    Maven 
 
Maven是基于项目对象模型(POM)， 信息来管理项目的构建，报告和文档的软件项目管理工具。 
Maven 除了以程序构建能力为特色之外，还提供高级项目管理工具。由于 Maven 的缺省构建规则有较高的可重用性，所以常常用两三行 Maven 构建脚本就可以构建简单的项目。由于 Maven 的面向项目的方法，许多 Apache Jakarta 项目发文时使用 Maven，而且公司
    
                                
    • 
                                
  • ibatis的queyrForList和queryForMap区别
                                    bijian1013
javaibatis
                                    
    一.说明 
        iBatis的返回值参数类型也有种：resultMap与resultClass，这两种类型的选择可以用两句话说明之： 
        1.当结果集列名和类的属性名完全相对应的时候，则可直接用resultClass直接指定查询结果类
    
                                
    • 
                                
  • LeetCode[位运算] - #191 计算汉明权重
                                    Cwind
java位运算LeetCodeAlgorithm题解
                                    
    原题链接：#191 Number of 1 Bits 
要求： 
写一个函数，以一个无符号整数为参数，返回其汉明权重。例如，‘11’的二进制表示为'00000000000000000000000000001011', 故函数应当返回3。 
汉明权重：指一个字符串中非零字符的个数；对于二进制串，即其中‘1’的个数。 
难度：简单 
分析： 
将十进制参数转换为二进制，然后计算其中1的个数即可。 
“
    
                                
    • 
                                
  • 浅谈java类与对象
                                    15700786134
java
                                    
          java是一门面向对象的编程语言，类与对象是其最基本的概念。所谓对象，就是一个个具体的物体，一个人，一台电脑，都是对象。而类，就是对象的一种抽象，是多个对象具有的共性的一种集合，其中包含了属性与方法，就是属于该类的对象所具有的共性。当一个类创建了对象，这个对象就拥有了该类全部的属性，方法。相比于结构化的编程思路，面向对象更适用于人的思维
    
                                
    • 
                                
  • linux下双网卡同一个IP
                                    被触发
linux
                                    
    转自： 
http://q2482696735.blog.163.com/blog/static/250606077201569029441/ 
 
由于需要一台机器有两个网卡，开始时设置在同一个网段的IP，发现数据总是从一个网卡发出，而另一个网卡上没有数据流动。网上找了下，发现相同的问题不少： 
一、 
关于双网卡设置同一网段IP然后连接交换机的时候出现的奇怪现象。当时没有怎么思考、以为是生成树
    
                                
    • 
                                
  • 安卓按主页键隐藏程序之后无法再次打开
                                    肆无忌惮_
安卓
                                    
    遇到一个奇怪的问题，当SplashActivity跳转到MainActivity之后，按主页键，再去打开程序，程序没法再打开（闪一下），结束任务再开也是这样，只能卸载了再重装。而且每次在Log里都打印了这句话"进入主程序"。后来发现是必须跳转之后再finish掉SplashActivity 
  
本来代码： 
  
// 销毁这个Activity 
fin
    
                                
    • 
                                
  • 通过cookie保存并读取用户登录信息实例
                                    知了ing
JavaScripthtml
                                    
    通过cookie的getCookies()方法可获取所有cookie对象的集合；通过getName()方法可以获取指定的名称的cookie；通过getValue()方法获取到cookie对象的值。另外，将一个cookie对象发送到客户端，使用response对象的addCookie()方法。 
下面通过cookie保存并读取用户登录信息的例子加深一下理解。 
（1）创建index.jsp文件。在改
    
                                
    • 
                                
  • JAVA 对象池
                                    矮蛋蛋
javaObjectPool
                                    
    原文地址： 
http://www.blogjava.net/baoyaer/articles/218460.html 
Jakarta对象池 
      ☆为什么使用对象池 
  恰当地使用对象池化技术，可以有效地减少对象生成和初始化时的消耗，提高系统的运行效率。Jakarta Commons Pool组件提供了一整套用于实现对象池化
    
                                
    • 
                                
  • ArrayList根据条件+for循环批量删除的方法
                                    alleni123
java
                                    
    场景如下： 
ArrayList<Obj> list 
 
Obj-> createTime, sid. 
 
现在要根据obj的createTime来进行定期清理。（释放内存） 
 
------------------------- 
 
首先想到的方法就是 
 
for(Obj o:list){
  if(o.createTime-currentT>xxx){
 
    
                                
    • 
                                
  • 阿里巴巴“耕地宝”大战各种宝
                                    百合不是茶
平台战略
                                    
    “耕地保”平台是阿里巴巴和安徽农民共同推出的一个 “首个互联网定制私人农场”，“耕地宝”由阿里巴巴投入一亿 ，主要是用来进行农业方面，将农民手中的散地集中起来 不仅加大农民集体在土地上面的话语权，还增加了土地的流通与 利用率，提高了土地的产量，有利于大规模的产业化的高科技农业的 发展，阿里在农业上的探索将会引起新一轮的产业调整，但是集体化之后农民的个体的话语权 将更少，国家应出台相应的法律法规保护
    
                                
    • 
                                
  • Spring注入有继承关系的类（1）
                                    bijian1013
javaspring
                                    
    一个类一个类的注入 
1.AClass类 
 
package com.bijian.spring.test2;

public class AClass {

    String a;
    String b;
   
    public String getA() {
        return a;
    }
    public void setA(Strin
    
                                
    • 
                                
  • 30岁转型期你能否成为成功人士
                                    bijian1013
成功
                                    
            很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人
    
                                
    • 
                                
  • [Velocity三]基于Servlet+Velocity的web应用
                                    bit1129
velocity
                                    
    什么是VelocityViewServlet 
使用org.apache.velocity.tools.view.VelocityViewServlet可以将Velocity集成到基于Servlet的web应用中，以Servlet+Velocity的方式实现web应用 
  Servlet + Velocity的一般步骤 
1.自定义Servlet，实现VelocityViewServl
    
                                
    • 
                                
  • 【Kafka十二】关于Kafka是一个Commit Log Service
                                    bit1129
service
                                    
    Kafka is a distributed, partitioned, replicated commit log service.这里的commit log如何理解？ 
  
A message is considered "committed" when all in sync replicas for that partition have applied i
    
                                
    • 
                                
  • NGINX + LUA实现复杂的控制
                                    ronin47
lua nginx 控制
                                    
    安装lua_nginx_module 模块 
lua_nginx_module 可以一步步的安装，也可以直接用淘宝的OpenResty 
Centos和debian的安装就简单了。。 
这里说下freebsd的安装： 
fetch http://www.lua.org/ftp/lua-5.1.4.tar.gz
tar zxvf lua-5.1.4.tar.gz
cd lua-5.1.4
ma
    
                                
    • 
                                
  • java-14.输入一个已经按升序排序过的数组和一个数字， 在数组中查找两个数，使得它们的和正好是输入的那个数字
                                    bylijinnan
java
                                    
    

public class TwoElementEqualSum {

	/**
	 * 第 14 题：
题目：输入一个已经按升序排序过的数组和一个数字，
在数组中查找两个数，使得它们的和正好是输入的那个数字。
要求时间复杂度是 O(n) 。如果有多对数字的和等于输入的数字，输出任意一对即可。
例如输入数组 1 、 2 、 4 、 7 、 11 、 15 和数字 15 。由于 
    
                                
    • 
                                
  • Netty源码学习-HttpChunkAggregator-HttpRequestEncoder-HttpResponseDecoder
                                    bylijinnan
javanetty
                                    
    今天看Netty如何实现一个Http Server 
org.jboss.netty.example.http.file.HttpStaticFileServerPipelineFactory： 
 

		pipeline.addLast("decoder", new HttpRequestDecoder());
        pipeline.addLast(&quo
    
                                
    • 
                                
  • java敏感词过虑-基于多叉树原理
                                    cngolon
违禁词过虑替换违禁词敏感词过虑多叉树
                                    
    基于多叉树的敏感词、关键词过滤的工具包，用于java中的敏感词过滤 
1、工具包自带敏感词词库，第一次调用时读入词库，故第一次调用时间可能较长，在类加载后普通pc机上html过滤5000字在80毫秒左右，纯文本35毫秒左右。 
  
2、如需自定义词库，将jar包考入WEB-INF工程的lib目录，在WEB-INF/classes目录下建一个 
utf-8的words.dict文本文件，
    
                                
    • 
                                
  • 多线程知识
                                    cuishikuan
多线程
                                    
     
  
  T1，T2，T3三个线程工作顺序，按照T1，T2，T3依次进行 
  public class T1 implements Runnable{    
     
       @Override    
      
    
                                
    • 
                                
  • spring整合activemq
                                    dalan_123
java spring jms
                                    
    整合spring和activemq需要搞清楚如下的东东1、ConnectionFactory分：     a、spring管理连接到activemq服务器的管理ConnectionFactory也即是所谓产生到jms服务器的链接      b、真正产生到JMS服务器链接的ConnectionFactory还得
    
                                
    • 
                                
  • MySQL时间字段究竟使用INT还是DateTime？
                                    dcj3sjt126com
mysql
                                    
      
环境：Windows XPPHP Version 5.2.9MySQL Server 5.1 
第一步、创建一个表date_test（非定长、int时间） 
CREATE TABLE `test`.`date_test` (`id` INT NOT NULL AUTO_INCREMENT ,`start_time` INT NOT NULL ,`some_content`
    
                                
    • 
                                
  • Parcel: unable to marshal value
                                    dcj3sjt126com
marshal
                                    
    在两个activity直接传递List<xxInfo>时，出现Parcel: unable to marshal value异常。      在MainActivity页面（MainActivity页面向NextActivity页面传递一个List<xxInfo>）：       Intent intent = new Intent(this, Next
    
                                
    • 
                                
  • linux进程的查看上（ps）
                                    eksliang
linux pslinux ps -llinux ps aux
                                    
    ps:将某个时间点的进程运行情况选取下来 
转载请出自出处：http://eksliang.iteye.com/admin/blogs/2119469 
http://eksliang.iteye.com 
        ps 这个命令的man page 不是很好查阅，因为很多不同的Unix都使用这儿ps来查阅进程的状态，为了要符合不同版本的需求，所以这个
    
                                
    • 
                                
  • 为什么第三方应用能早于System的app启动
                                    gqdy365
System
                                    
    Android应用的启动顺序网上有一大堆资料可以查阅了，这里就不细述了，这里不阐述ROM启动还有bootloader，软件启动的大致流程应该是启动kernel -> 运行servicemanager 把一些native的服务用命令启动起来（包括wifi, power, rild, surfaceflinger, mediaserver等等）-> 启动Dalivk中的第一个进程Zygot
    
                                
    • 
                                
  • App Framework发送JSONP请求(3)
                                    hw1287789687
jsonp跨域请求发送jsonpajax请求越狱请求
                                    
    App Framework 中如何发送JSONP请求呢? 
使用jsonp,详情请参考:http://json-p.org/ 
如何发送Ajax请求呢? 
(1)登录 
/***
 * 会员登录
 * @param username
 * @param password
 */
var user_login=function(username,password){
//    aler
    
                                
    • 
                                
  • 发福利，整理了一份关于“资源汇总”的汇总
                                    justjavac
资源
                                    
    觉得有用的话，可以去github关注：https://github.com/justjavac/awesome-awesomeness-zh_CN  通用 
 
  free-programming-books-zh_CN 免费的计算机编程类中文书籍  
  精彩博客集合 hacke2/hacke2.github.io#2  
  ResumeSample 程序员简历
    
                                
    • 
                                
  • 用 Java 技术创建 RESTful Web 服务
                                    macroli
java编程WebREST
                                    
    转载：http://www.ibm.com/developerworks/cn/web/wa-jaxrs/ 
  
JAX-RS (JSR-311) 【  Java API for RESTful Web Services 】是一种 Java™ API，可使 Java Restful 服务的开发变得迅速而轻松。这个 API 提供了一种基于注释的模型来描述分布式资源。注释被用来提供资源的位
    
                                
    • 
                                
  • CentOS6.5-x86_64位下oracle11g的安装详细步骤及注意事项
                                    超声波
oraclelinux
                                    
    前言： 
这两天项目要上线了，由我负责往服务器部署整个项目，因此首先要往服务器安装oracle，服务器本身是CentOS6.5的64位系统，安装的数据库版本是11g，在整个的安装过程中碰到很多的坑，不过最后还是通过各种途径解决并成功装上了。转别写篇博客来记录完整的安装过程以及在整个过程中的注意事项。希望对以后那些刚刚接触的菜鸟们能起到一定的帮助作用。 
  
安装过程中可能遇到的问题（注
    
                                
    • 
                                
  • HttpClient 4.3 设置keeplive 和 timeout 的方法
                                    supben
httpclient
                                    
    ConnectionKeepAliveStrategy kaStrategy = new DefaultConnectionKeepAliveStrategy() {
			@Override
			public long getKeepAliveDuration(HttpResponse response, HttpContext context) {
				long keepAlive
    
                                
    • 
                                
  • Spring 4.2新特性-@Import注解的升级
                                    wiselyman
spring 4
                                    
    3.1 @Import 
 
 @Import注解在4.2之前只支持导入配置类 
 在4.2,@Import注解支持导入普通的java类,并将其声明成一个bean 
  
3.2 示例 
 
 演示java类 
  
package com.wisely.spring4_2.imp;

public class DemoService {
    public void doSomethin
    
                                
    •