smartui 0.2.0

A terminal utility that integrates with Google Gemini API
Documentation 
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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>smartui Concept</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Optional: Custom font for terminal feel */
        @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');
        body {
            font-family: 'Roboto Mono', monospace;
        }
        .terminal-window {
            background-color: #1e1e1e; /* Dark terminal background */
            color: #00ff00; /* Green text for classic feel */
            border-radius: 8px;
            padding: 16px;
            overflow-x: auto; /* Handle potential overflow */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
        }
        .prompt::before {
            content: "$ "; /* Simulate a terminal prompt */
            color: #ffffff; /* White prompt symbol */
        }
        .cursor {
            animation: blink 1s infinite;
        }
        @keyframes blink {
            50% { opacity: 0; }
        }
        .ai-response {
            color: #cccccc; /* Lighter color for AI response */
            margin-top: 8px;
            white-space: pre-wrap; /* Preserve whitespace for formatted output */
        }
        .feature-pill {
            background-color: #333333;
            color: #ffffff;
            padding: 4px 8px;
            border-radius: 9999px; /* Full rounded pill shape */
            font-size: 0.75rem; /* text-xs */
            margin-right: 4px;
            margin-bottom: 4px;
            display: inline-block;
        }
    </style>
</head>
<body class="bg-gray-800 flex items-center justify-center min-h-screen p-4">

    <div class="terminal-window w-full max-w-2xl">
        <div class="flex items-center text-sm mb-4">
            <div class="flex-1">smartui - Terminal AI Utility</div>
            <div class="flex space-x-1">
                <span class="w-3 h-3 bg-red-500 rounded-full"></span>
                <span class="w-3 h-3 bg-yellow-400 rounded-full"></span>
                <span class="w-3 h-3 bg-green-500 rounded-full"></span>
            </div>
        </div>

        <div class="prompt">
            <span class="text-white">gm explain </span>
            <span class="text-blue-300">'ls -lart'</span>
            <span class="cursor bg-green-500 w-2 h-4 inline-block -mb-1"></span>
        </div>

        <div class="text-gray-500 text-sm mt-2">
            Processing with Gemini API...
        </div>

        <div class="ai-response">
            <span class="text-white">[Gemini]:</span> The command `ls -lart` lists files and directories in the current directory.
            - `l`: Use a long listing format.
            - `a`: Do not ignore entries starting with . (hidden files).
            - `r`: Reverse the order of sorting.
            - `t`: Sort by modification time, newest first.
            This is commonly used to see the most recently modified files, including hidden ones.
        </div>

        <div class="prompt mt-6">
            <span class="text-white">gm summarize </span>
            <span class="text-purple-300">report.txt</span>
            <span class="cursor bg-green-500 w-2 h-4 inline-block -mb-1"></span>
        </div>

        <div class="text-gray-500 text-sm mt-2">
            Processing with Gemini API...
        </div>

        <div class="ai-response">
             <span class="text-white">[Gemini]:</span> The report summarizes the Q3 project progress, highlighting key milestones achieved in the backend development and initial user testing phases. It notes minor delays in the frontend integration but projects completion within the next sprint. Key metrics show positive user engagement in preliminary tests.
        </div>


        <div class="mt-8 text-sm text-gray-400">
            Featuring:
            <span class="feature-pill">Command Explain</span>
            <span class="feature-pill">Text Summarize</span>
            <span class="feature-pill">Quick Translate</span>
            <span class="feature-pill">Code Explain</span>
            <span class="feature-pill">Error Explain</span>
            <span class="feature-pill">Regex Generate</span>
            <span class="feature-pill">Data Format Convert</span>
            <span class="feature-pill">Concept Explain</span>
            <span class="feature-pill">Find Command</span>
            <span class="feature-pill">Boilerplate Generate</span>
            <span class="feature-pill">Text Review</span>
            <span class="feature-pill">Name Suggest</span>
            <span class="feature-pill">Algorithm Explain</span>
            <span class="feature-pill">Test Generate</span>
            <span class="feature-pill">List Dir Overview</span>
        </div>

    </div>

</body>
</html>