llms-py 2.0.9__py3-none-any.whl → 3.0.10__py3-none-any.whl

llms/ui/App.mjs

@@ -0,0 +1,188 @@
+import { ref, computed, watch, inject, onMounted, onUnmounted } from "vue"
+import { useRouter, useRoute } from "vue-router"
+import { AppContext } from "./ctx.mjs"
+
+// Vertical Sidebar Icons
+const LeftBar = {
+    template: `
+        <div class="select-none flex flex-col space-y-2 pt-2.5 px-1">
+            <div v-for="(icon, id) in $ctx.left" :key="id" class="relative flex items-center justify-center">
+                <component :is="icon.component" 
+                    class="size-7 p-1 cursor-pointer text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 rounded block"
+                    :class="{ 'bg-gray-200 dark:bg-gray-700' : icon.isActive({ ...$layout }) }" 
+                    @mouseenter="tooltip = icon.id"
+                    @mouseleave="tooltip = ''"
+                    />
+                <div v-if="tooltip === icon.id && !icon.isActive({ ...$layout })" 
+                    class="absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 text-xs text-white bg-gray-900 dark:bg-gray-800 rounded shadow-md z-50 whitespace-nowrap pointer-events-none" style="z-index: 60">
+                    {{icon.title ?? icon.name}}
+                </div>    
+            </div>
+        </div>
+    `,
+    setup() {
+        const tooltip = ref('')
+        return {
+            tooltip,
+        }
+    }
+}
+
+const LeftPanel = {
+    template: `
+        <div v-if="component" class="flex flex-col h-full border-r border-gray-200 dark:border-gray-700">
+            <button type="button" @click="$ctx.toggleLayout('left',false)" class="absolute top-2 right-2 p-1 rounded-md text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 lg:hidden z-20">
+                <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
+            </button>
+            <component :is="component" />
+        </div>
+    `,
+    setup() {
+        /**@type {AppContext} */
+        const ctx = inject('ctx')
+        const component = computed(() => ctx.component(ctx.layout.left))
+        return {
+            component,
+        }
+    }
+}
+
+const TopBar = {
+    template: `
+        <div class="select-none flex space-x-1">
+            <div v-for="(icon, id) in $ctx.top" :key="id" class="relative flex items-center justify-center">
+                <component :is="icon.component" 
+                    class="size-7 p-1 cursor-pointer text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 block border border-transparent"
+                    :class="{ 'bg-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-600 rounded' : icon.isActive({ ...$layout }) }" 
+                    @mouseenter="tooltip = icon.id"
+                    @mouseleave="tooltip = ''"
+                    />
+                <div v-if="tooltip === icon.id && !icon.isActive({ ...$layout })" 
+                    class="absolute top-full mt-2 px-2 py-1 text-xs text-white bg-gray-900 dark:bg-gray-800 rounded shadow-md z-50 whitespace-nowrap pointer-events-none"
+                    :class="last2.includes(id) ? 'right-0' : 'left-1/2 -translate-x-1/2'">
+                    {{icon.title ?? icon.name}}
+                </div>    
+            </div>
+        </div>
+    `,
+    setup() {
+        const tooltip = ref('')
+        const last2 = ref(Object.keys($ctx.top).slice(-2))
+        return {
+            tooltip,
+            last2,
+        }
+    }
+}
+
+const TopPanel = {
+    template: `
+        <component v-if="component" :is="component" class="mb-2" />
+    `,
+    setup() {
+        /**@type {AppContext} */
+        const ctx = inject('ctx')
+        const component = computed(() => ctx.component(ctx.layout.top))
+        return {
+            component,
+        }
+    }
+}
+
+export default {
+    components: {
+        LeftBar,
+        LeftPanel,
+        TopBar,
+        TopPanel,
+    },
+    setup() {
+        const router = useRouter()
+        const route = useRoute()
+
+        /**@type {AppContext} */
+        const ctx = inject('ctx')
+        const ai = ctx.ai
+        const isMobile = ref(false)
+        const modal = ref()
+
+        const checkMobile = () => {
+            //const wasMobile = isMobile.value
+            isMobile.value = window.innerWidth < 640 // sm breakpoint
+
+            //console.log('checkMobile', wasMobile, isMobile.value)
+            // Only auto-adjust sidebar state when transitioning between mobile/desktop
+            if (isMobile.value) {
+                ctx.toggleLayout('left', false)
+            }
+        }
+
+        onMounted(() => {
+            checkMobile()
+            window.addEventListener('resize', checkMobile)
+            if (route.query.open) {
+                modal.value = ctx.openModal(route.query.open)
+            }
+        })
+
+        onUnmounted(() => {
+            window.removeEventListener('resize', checkMobile)
+        })
+
+        function closeModal() {
+            ctx.closeModal(route.query.open)
+        }
+
+        watch(() => route.query.open, (newVal) => {
+            modal.value = ctx.modalComponents[newVal]
+            console.log('open', newVal, modal.value)
+        })
+
+        watch(() => ctx.state.selectedModel, (newVal) => {
+            ctx.chat.setSelectedModel(ctx.chat.getModel(newVal))
+        })
+
+        return { ai, modal, isMobile, closeModal }
+    },
+    template: `
+        <div class="flex h-screen">
+            <!-- Mobile Overlay -->
+            <div v-if="isMobile && $ctx.layoutVisible('left') && $ai.hasAccess"
+                @click="$ctx.toggleLayout('left')"
+                :class="$ctx.cls('mobile-overlay', 'fixed inset-0 bg-black/50 z-40 lg:hidden')"
+            ></div>
+
+            <div v-if="$ai.hasAccess" id="sidebar" :class="$ctx.cls('sidebar', 'z-100 relative flex bg-gray-50 dark:bg-gray-800')">
+                <LeftBar id="left-bar" />
+                <LeftPanel id="left-panel"
+                    v-if="$ai.hasAccess && $ctx.layoutVisible('left')"
+                    :class="[
+                        'transition-transform duration-300 ease-in-out z-50',
+                        'w-72 xl:w-80 flex-shrink-0',
+                        'lg:relative',
+                        'fixed inset-y-0 left-[2.25rem] lg:left-0',
+                        'bg-gray-50 dark:bg-gray-800'
+                    ]"
+                />
+            </div>
+
+            <!-- Main Area -->
+            <div id="main" :class="$ctx.cls('main', 'flex-1 flex flex-col')">
+                <div id="main-inner" :class="$ctx.cls('main-inner', 'flex flex-col h-full w-full overflow-hidden')">
+                    <div v-if="$ai.hasAccess" id="header" :class="$ctx.cls('header', 'py-1 pr-1 flex items-center justify-between shrink-0')">
+                        <div>
+                            <ModelSelector :models="$state.models" v-model="$state.selectedModel" />
+                        </div>
+                        <TopBar id="top-bar" />
+                    </div>
+                    <TopPanel v-if="$ai.hasAccess" id="top-panel" :class="$ctx.cls('top-panel', 'shrink-0')" />
+                    <div id="page" :class="$ctx.cls('page', 'flex-1 overflow-y-auto min-h-0 flex flex-col')">
+                        <RouterView class="h-full" />
+                    </div>
+                </div>
+            </div>
+
+            <component v-if="modal" :is="modal" :class="$ctx.cls('modal', '!z-[200]')" @done="closeModal" />
+        </div>
+    `,
+}

llms/ui/ai.mjs

@@ -0,0 +1,217 @@
+import { reactive } from "vue"
+import { ApiResult } from "@servicestack/client"
+
+const base = ''
+const headers = { 'Accept': 'application/json' }
+const prefsKey = 'llms.prefs'
+
+export const o = {
+    version: '3.0.10',
+    base,
+    prefsKey,
+    welcome: 'Welcome to llms.py',
+    auth: null,
+    requiresAuth: false,
+    authType: 'apikey',  // 'oauth' or 'apikey' - controls which SignIn component to use
+    headers,
+    isSidebarOpen: true,  // Shared sidebar state (default open for lg+ screens)
+    cacheUrlInfo: {},
+
+    get hasAccess() {
+        return !this.requiresAuth || this.auth
+    },
+
+    resolveUrl(url) {
+        return url.startsWith('http') || url.startsWith('/v1') ? url : base + url
+    },
+    get(url, options) {
+        return fetch(this.resolveUrl(url), {
+            ...options,
+            headers: Object.assign({}, this.headers, options?.headers),
+        })
+    },
+    async getJson(url, options) {
+        const res = await this.get(url, options)
+        return await this.createJsonResult(res, url)
+    },
+    async post(url, options) {
+        return await fetch(this.resolveUrl(url), {
+            method: 'POST',
+            ...options,
+            headers: Object.assign({ 'Content-Type': 'application/json' }, this.headers, options?.headers),
+        })
+    },
+    async postForm(url, options) {
+        return await fetch(this.resolveUrl(url), {
+            method: 'POST',
+            ...options,
+            headers: Object.assign({}, options?.headers),
+        })
+    },
+    async postJson(url, options) {
+        const res = await this.post(url, options)
+        return await this.createJsonResult(res, url)
+    },
+    async createJsonResult(res, msg = null) {
+        let txt = ''
+        try {
+            txt = await res.text()
+            const response = JSON.parse(txt)
+            if (response?.responseStatus?.errorCode) {
+                return new ApiResult({ error: response.responseStatus })
+            }
+            if (!res.ok) {
+                return new ApiResult({ error: { errorCode: 'Error', message: res.statusText } })
+            }
+            return new ApiResult({ response })
+        } catch (e) {
+            console.error('Failed to parse JSON', e, msg, txt)
+            const responseStatus = {
+                errorCode: 'Error',
+                message: `${e.message ?? e}`,
+                stackTrace: msg ? `${msg}\n${txt}` : txt,
+            }
+            return { responseStatus }
+        }
+    },
+    createErrorStatus({ message, errorCode, stackTrace, errors, meta }) {
+        const ret = {
+            errorCode: errorCode || 'Error',
+            message: message,
+        }
+        if (stackTrace) {
+            ret.stackTrace = stackTrace
+        }
+        if (errors && Array.isArray(errors)) {
+            ret.errors = errors
+        }
+        if (meta) {
+            ret.meta = meta
+        }
+        return ret
+    },
+    createErrorResult(e) {
+        return new ApiResult({
+            error: e.errorCode
+                ? this.createErrorStatus(e)
+                : this.createErrorStatus({ message: `${e.message ?? e}` })
+        })
+    },
+    async getConfig() {
+        return this.get('/config')
+    },
+    async getModels() {
+        return this.get('/models')
+    },
+    async getAuth() {
+        return this.requiresAuth
+            ? this.get('/auth')
+            : new Promise(resolve => resolve({ json: () => ({ responseStatus: { errorCode: '!requiresAuth' } }) }))
+    },
+    get isAdmin() {
+        return !this.requiresAuth || this.auth && this.auth.roles?.includes('Admin')
+    },
+
+    signIn(auth) {
+        this.auth = auth
+        if (auth?.apiKey) {
+            this.headers.Authorization = `Bearer ${auth.apiKey}`
+        } else {
+            if (this.headers.Authorization) {
+                delete this.headers.Authorization
+            }
+        }
+    },
+    async signOut() {
+        try {
+            await this.post('/auth/logout')
+        } catch (error) {
+            console.error('Logout error:', error)
+        }
+        this.auth = null
+        if (this.headers.Authorization) {
+            delete this.headers.Authorization
+        }
+    },
+    async init(ctx) {
+        // Load models and prompts
+        const [configRes, modelsRes, extensionsRes] = await Promise.all([
+            this.getConfig(),
+            this.getModels(),
+            this.get('/ext'),
+        ])
+        const config = await configRes.json()
+        const models = await modelsRes.json()
+        const extensions = await extensionsRes.json()
+
+        // Update auth settings from server config
+        if (config.requiresAuth != null) {
+            this.requiresAuth = config.requiresAuth
+        }
+        if (config.authType != null) {
+            this.authType = config.authType
+        }
+
+        // Get auth status
+        const authRes = await this.getAuth()
+        const auth = this.requiresAuth
+            ? await authRes.json()
+            : null
+        if (auth?.responseStatus?.errorCode) {
+            console.error(auth.responseStatus.errorCode, auth.responseStatus.message)
+        } else {
+            this.signIn(auth)
+        }
+        return { config, models, extensions, auth }
+    },
+
+
+    async uploadFile(file) {
+        const formData = new FormData()
+        formData.append('file', file)
+        const response = await fetch(this.resolveUrl('/upload'), {
+            method: 'POST',
+            body: formData
+        })
+        if (!response.ok) {
+            throw new Error(`Upload failed: ${response.statusText}`)
+        }
+        return response.json()
+    },
+
+
+    getCacheInfo(url) {
+        return this.cacheUrlInfo[url]
+    },
+    async fetchCacheInfos(urls) {
+        const infos = {}
+        const fetchInfos = []
+        for (const url of urls) {
+            const info = this.getCacheInfo(url)
+            if (info) {
+                infos[url] = info
+            } else {
+                fetchInfos.push(fetch(this.resolveUrl(url + "?info")))
+            }
+        }
+        const responses = await Promise.all(fetchInfos)
+        for (let i = 0; i < urls.length; i++) {
+            try {
+                const info = await responses[i].json()
+                this.setCacheInfo(urls[i], info)
+                infos[urls[i]] = info
+            } catch (e) {
+                console.error('Failed to fetch info for', urls[i], e)
+            }
+        }
+        return infos
+    },
+    setCacheInfo(url, info) {
+        this.cacheUrlInfo[url] = info
+    }
+
+}
+
+
+let ai = reactive(o)
+export default ai