mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-28 02:34:10 +00:00
643533c572
## Summary set autoCols = true by default for Logs Terminal ## Changes Previously, the logs terminal had autoCols: false to preserve server-side progress bar rendering, However, this caused large black empty areas when the server terminal was narrower than the UI panel, Many server environments don't provide terminal size at all, making this tradeoff not worthwhile. The original implementation set autoCols: false because the server renders progress bars based on its own terminal width. If the frontend used a different column count, progress bars would display incorrectly (e.g., wrapped or truncated). However, this created a poor user experience: 1. The terminal only filled a portion of the panel width (often 80 columns) 2. The remaining space appeared as a large black empty area 3. Many backend environments don't provide size data at all, making the fixed-width approach pointless fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/7117 ## Screenshots (if applicable) before https://github.com/user-attachments/assets/e38af410-9cf1-4175-8acc-39d11a5b73ce after https://github.com/user-attachments/assets/3d180318-609f-44c5-aac5-230f9e4ef596 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7132-fix-should-allow-autoCols-true-when-server-doesn-t-provide-size-2be6d73d365081e7bf3bf5988bdba39a) by [Unito](https://www.unito.io)
95 lines
2.5 KiB
Vue
95 lines
2.5 KiB
Vue
<template>
|
|
<div class="h-full w-full bg-transparent">
|
|
<p v-if="errorMessage" class="p-4 text-center">
|
|
{{ errorMessage }}
|
|
</p>
|
|
<ProgressSpinner
|
|
v-else-if="loading"
|
|
class="relative inset-0 z-10 flex h-full items-center justify-center"
|
|
/>
|
|
<BaseTerminal v-show="!loading" @created="terminalCreated" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { until } from '@vueuse/core'
|
|
import { storeToRefs } from 'pinia'
|
|
import ProgressSpinner from 'primevue/progressspinner'
|
|
import type { Ref } from 'vue'
|
|
import { onMounted, onUnmounted, ref } from 'vue'
|
|
|
|
import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
|
|
import type { LogEntry, LogsWsMessage } from '@/schemas/apiSchema'
|
|
import { api } from '@/scripts/api'
|
|
import { useExecutionStore } from '@/stores/executionStore'
|
|
|
|
import BaseTerminal from './BaseTerminal.vue'
|
|
|
|
const errorMessage = ref('')
|
|
const loading = ref(true)
|
|
|
|
const terminalCreated = (
|
|
{ terminal, useAutoSize }: ReturnType<typeof useTerminal>,
|
|
root: Ref<HTMLElement | undefined>
|
|
) => {
|
|
// Auto-size terminal to fill container width.
|
|
// minCols: 80 ensures minimum width for colab environments.
|
|
// See https://github.com/comfyanonymous/ComfyUI/issues/6396
|
|
useAutoSize({ root, autoRows: true, autoCols: true, minCols: 80 })
|
|
|
|
const update = (entries: Array<LogEntry>) => {
|
|
terminal.write(entries.map((e) => e.m).join(''))
|
|
}
|
|
|
|
const logReceived = (e: CustomEvent<LogsWsMessage>) => {
|
|
update(e.detail.entries)
|
|
}
|
|
|
|
const loadLogEntries = async () => {
|
|
const logs = await api.getRawLogs()
|
|
update(logs.entries)
|
|
}
|
|
|
|
const watchLogs = async () => {
|
|
const { clientId } = storeToRefs(useExecutionStore())
|
|
if (!clientId.value) {
|
|
await until(clientId).not.toBeNull()
|
|
}
|
|
await api.subscribeLogs(true)
|
|
api.addEventListener('logs', logReceived)
|
|
}
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
await loadLogEntries()
|
|
} catch (err) {
|
|
console.error('Error loading logs', err)
|
|
// On older backends the endpoints won't exist
|
|
errorMessage.value =
|
|
'Unable to load logs, please ensure you have updated your ComfyUI backend.'
|
|
return
|
|
}
|
|
|
|
await watchLogs()
|
|
loading.value = false
|
|
})
|
|
|
|
onUnmounted(async () => {
|
|
if (api.clientId) {
|
|
await api.subscribeLogs(false)
|
|
}
|
|
api.removeEventListener('logs', logReceived)
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
:deep(.p-terminal) .xterm {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
:deep(.p-terminal) .xterm-screen {
|
|
overflow-y: hidden;
|
|
}
|
|
</style>
|