BCIS/index.html at main · rickyjohn-dev/BCIS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html><html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Behavioral Content Intelligence System</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            max-width: 800px;
            margin: auto;
        }
        textarea, input {
            width: 100%;
            margin-bottom: 10px;
            padding: 10px;
        }
        button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        #highlightedOutput mark {
            background-color: yellow;
        }
        #highlightedOutput {
            border: 1px solid #ccc;
            padding: 10px;
            margin-top: 10px;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <h1>Behavioral Content Intelligence System</h1><label for="inputText">Paste Content:</label>
<textarea id="inputText" rows="10"></textarea>

<label for="keywords">Enter Keywords (comma-separated):</label>
<input type="text" id="keywords" placeholder="e.g. engagement, conversion, retention">

<button id="analyzeButton">Analyze</button>

<p>Word Count: <span id="wordCount">0</span></p>

<div id="highlightedOutput"></div>

<canvas id="keywordChart" width="400" height="200"></canvas>

<script>
    function highlightKeywords(text, keywords) {
        let escaped = keywords.map(k => k.trim()).filter(k => k).join('|').replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
        let regex = new RegExp(`\\b(${escaped})\\b`, 'gi');
        return text.replace(regex, '<mark>$1</mark>');
    }

    function countKeywords(text, keywords) {
        let counts = {};
        let words = text.toLowerCase().split(/\W+/);
        keywords.forEach(k => {
            let key = k.trim().toLowerCase();
            counts[key] = words.filter(w => w === key).length;
        });
        return counts;
    }

    function renderChart(data) {
        let ctx = document.getElementById('keywordChart').getContext('2d');
        if (window.chart) window.chart.destroy();
        window.chart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: Object.keys(data),
                datasets: [{
                    label: 'Keyword Frequency',
                    data: Object.values(data),
                    backgroundColor: 'rgba(54, 162, 235, 0.5)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    }

    document.getElementById('inputText').addEventListener('input', () => {
        let text = document.getElementById('inputText').value;
        let count = text.trim().split(/\s+/).filter(word => word).length;
        document.getElementById('wordCount').innerText = count;
    });

    document.getElementById('analyzeButton').addEventListener('click', () => {
        let text = document.getElementById('inputText').value;
        let keywords = document.getElementById('keywords').value.split(',');
        let highlighted = highlightKeywords(text, keywords);
        document.getElementById('highlightedOutput').innerHTML = highlighted;

        let counts = countKeywords(text, keywords);
        renderChart(counts);
    });
</script>

</body>
</html>