tomoya
/
iCulture


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
							<!DOCTYPE html>
<html lang="zh-TW">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.0/css/dataTables.bootstrap5.min.css">
    <script src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.0/js/dataTables.bootstrap5.min.js"></script>


    <style>
        @font-face {
            font-family: my_font;
            src: local("zh-cn.ttf") format("opentype");
        }

        *{
            font-family: my_font;
        }
    </style>


    <title>iCulture</title>

</head>

<body>

    <div class="container">
        <div class="p-5 mt-5">

            <div class="mb-3">
                <div for="search_query" class="form-label fw-bold">iCulture Semantic Search</div>
                <hr>
                <div class="row mb-3">

                    <div class="col">
                        <label for="start_date" class="form-label">Start Date</label>
                        <input type="date" name="start_date" class="form-control col" id="start_date">
                    </div>
                    <div class="col">
                        <label for="end_date" class="form-label">End Date</label>
                        <input type="date" name="end_date" class="form-control col" id="end_date">
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col">
                        <label for="top_k" class="form-label">Top K</label>
                        <input type="number" name="top_k" class="form-control col" id="top_k"
                            placeholder="default: 100">
                    </div>
                    <div class="col">
                        <label for="similarity" class="form-label">Similarity</label>
                        <input type="number" name="similarity" class="form-control col" id="similarity"
                            placeholder="-1 - 1 (default: 0)">
                    </div>
                </div>
                <label for="search_query" class="form-label">Search Query</label>
                <div class="input-group mb-3">

                    <input type="text" name="query" class="form-control" id="search_query"
                        placeholder="Search query...">
                    <button class="btn btn-outline-primary" type="button" id="search"><i
                            class="fas fa-search"></i></button>
                </div>
            </div>
        </div>
        <div class="p-1 text-center" id="wordcloud">

        </div>
        <div class="p-5 about" id="tag_list">

        </div>
        <div class="p-5" id="results">

        </div>
    </div>


    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
        crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->

    <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
        integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"
        integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/"
        crossorigin="anonymous"></script> -->

</body>

<script>
    function semantic_search() {

        if ($('#search_query').val() != '') {

            $('#tag_list').empty()
            $('#wordcloud').empty()
            $('#results').empty()

            $('#wordcloud').append(`
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>`)

            top_k = parseInt($("#top_k").val())
            if (isNaN(top_k)) {
                top_k = 100
            }

            similarity = parseFloat($("#similarity").val())
            if (isNaN(similarity)) {
                similarity = 0.0
            }

            data = {
                "query": $("#search_query").val(),
                "top_k": top_k,
                "similarity": similarity,
                "start_date": $("#start_date").val(),
                "end_date": $("#end_date").val()
            }
            data = JSON.stringify(data)

            console.log(data);

            $.ajax({
                url: "/semantic_search",
                type: 'post',
                dataType: 'json', // 預期從server接收的資料型態
                contentType: 'application/json; charset=utf-8', // 要送到server的資料型態
                data: data,
            }).done(function (data) {
                data = JSON.parse(data['semantic_search'])
                $('#results').empty()
                $('#results').append(`<table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>title</th>
                        <th>content_tags</th>
                        <th>descriptionFilterHtml</th>
                        <th>masterUnit</th>
                        <th>startDate</th>
                        <th>endDate</th>
                        
                    </tr>
                </thead>
                <tbody>
                    
                </tbody>
            </table>`)
                $.each(data, function (indexInArray, valueOfElement) {
                    $('tbody').append(`
                    <tr>
                        <td>${valueOfElement.title}</td>
                        <td><details>
                                <summary>${valueOfElement.content_tags.slice(0, 10) + '...'}</summary>
                                <p>${valueOfElement.content_tags}</p>
                            </details>
                        </td>
                        <td><details>
                                <summary>${valueOfElement.descriptionFilterHtml.slice(0, 50) + '...'}</summary>
                                <p>${valueOfElement.descriptionFilterHtml}</p>
                            </details>
                        </td>
                        <td>${valueOfElement.masterUnit}</td>
                        <td>${valueOfElement.startDate}</td>
                        <td>${valueOfElement.endDate}</td>
                    </tr>
                 `)
                });

                $('table').DataTable({
                    "order": []
                });

            }).fail(function () {
                console.log("error");
            });


            $.ajax({
                url: "/wordcloud",
                type: 'post',
                dataType: 'json', // 預期從server接收的資料型態
                contentType: 'application/json; charset=utf-8', // 要送到server的資料型態
                data: data,
            }).done(function (data) {
                data = JSON.parse(data['wordcloud'])
                $('#wordcloud').empty()
                $('#wordcloud').append(data)

            }).fail(function () {
                console.log("error");
            });


            $.ajax({
                url: "/tag_list",
                type: 'post',
                dataType: 'json', // 預期從server接收的資料型態
                contentType: 'application/json; charset=utf-8', // 要送到server的資料型態
                data: data,
            }).done(function (data) {
                data = JSON.parse(data['tag_list'])

                $('#tag_list').empty()
                if (data.length != 0) {
                    $('#tag_list').append(`Top 100 Tags<br>`)

                    $.each(data, function (indexInArray, valueOfElement) {
                        $('#tag_list').append(`
                            <span class="badge bg-primary">#${valueOfElement}&nbsp;</span>
                    `)
                    });
                }

            }).fail(function () {
                console.log("error");
            });
        }
    }

    $('#search').on("click", function () {
        semantic_search()
    });

    $('#search_query').on("keyup", function (event) {
        // Number 13 is the "Enter" key on the keyboard
        if (event.keyCode === 13) {
            // Cancel the default action, if needed
            event.preventDefault();
            // Trigger the button element with a click
            $('#search').click();
        }
    });

</script>

</html>