team/NLP.html at main · componentcore/team · 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
117
118
119
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>AI-Powered Project Search</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Shared Stylesheets (reused from projects page) -->
<link type="text/css" rel="stylesheet" href="../localsite/css/base.css" id="/localsite/css/base.css" />
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/shared-styles.css">

<!-- NLP-Specific Stylesheets -->
<link rel="stylesheet" href="css/nlp.css">
<link rel="stylesheet" href="css/ai-insights.css">
</head>
<body>

<h1>AI-Powered Project Search</h1>
<p>Searching across all project feeds from the <a href="/feed/">Feed Player Sheet</a>.</p>

<div class="suggestions-box">
    <h3>💡 Try these AI-powered project searches:</h3>
    <ul>
        <li>Find projects about sustainability and environmental conservation</li>
        <li>Projects involving data visualization or mapping</li>
        <li>Initiatives focused on education or social impact</li>
    </ul>
    <div class="info-text">
        <span>ℹ️</span>
        <span>Use regular search for keywords, or click <strong>Gemini Insights</strong> for intelligent semantic matching across projects.</span>
    </div>

    <!-- Gemini Resources Section -->
    <div id="gemini-resources" class="card" style="margin-top: 16px; padding: 16px; background: var(--bg-tertiary); border-radius: var(--radius-md);">
        <h4 style="margin: 0 0 8px 0;" id="gemini-key-title">Add Gemini Key</h4>
        <div id="gemini-key-content">
            Add it in docker/.env
        </div>
    </div>
</div>

<!-- Search Input -->
<div class="searchbar">
    <input id="q" placeholder="Search feeds/projects…" />
    <label><input type="checkbox" id="fuzzy" checked /> Fuzzy</label>
    <input type="range" id="th" min="0" max="60" value="35" />
</div>

<!-- AI Insights Component (Modular & Reusable) -->
<div id="aiInsights" class="ai-insights-container" style="display: none;">
    <div class="insights-header">
        <div class="insights-status" id="insightsStatus">
            <!-- AI Provider Buttons (rendered by JavaScript) -->
            <div id="aiProviderButtons"></div>

            <!-- Custom Controls Area (rendered by JavaScript if enabled) -->
            <div id="aiControlsArea"></div>
        </div>
    </div>

    <!-- Insights Content (dynamically populated) -->
    <div class="insights-content" id="insightsContent">
        <div style="color: var(--text-secondary); font-style: italic; text-align: center; padding: 20px;">
            Enter a search query above and click <strong>Gemini Insights</strong> for AI-powered semantic search.
        </div>
    </div>
</div>

<!-- Regular Search Results -->
<div id="search-results">Loading feeds…</div>

<!-- External Libraries - Load First -->
<script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2/dist/fuse.min.js"></script>

<!-- AI Integration Scripts - Optional, don't block if missing -->
<script src="js/common.js" onerror="console.warn('common.js not loaded - AI features will use standalone implementation')"></script>
<script src="js/setup.js" onerror="console.warn('setup.js not loaded - Gemini setup features will be limited')"></script>
<script src="js/list.js" onerror="console.warn('list.js not loaded - AI features will use standalone implementation')"></script>

<!-- AI Insights Component (Core) -->
<script src="js/ai-insights-core.js"></script>
<script src="js/ai-insights-config.js"></script>
<script src="js/nlp-url-resolver.js"></script>
<script src="js/ai-insights-nlp-adapter.js"></script>

<!-- NLP Search Modules -->
<script src="js/nlp-search.js"></script>
<script src="js/nlp.js"></script>

<!-- Initialize AI Insights Component -->
<script>
document.addEventListener('DOMContentLoaded', async () => {
    console.log('🚀 Initializing NLP AI Insights Component');

    // Initialize Gemini Resources section (from setup.js)
    if (typeof setupGeminiResources === 'function') {
        setupGeminiResources();
    }

    // Create and initialize the NLP AI Adapter
    window.nlpAI = new NLPAIAdapter();

    try {
        const success = await window.nlpAI.init();
        if (success) {
            console.log('✅ NLP AI Insights Component ready');
        } else {
            console.error('❌ Failed to initialize NLP AI Insights Component');
        }
    } catch (error) {
        console.error('❌ Error initializing NLP AI Insights Component:', error);
    }
});
</script>

</body>
</html>