SCP-798-JP - Adversarial Example

SCP-798-JP - Adversarial Example
By: (user deleted)
Published on 08 Aug 2022 13:56

What this is

A bunch of miscellaneous CSS 'improvements' that I, Croquembouche, use on a bunch of pages because I think it makes them easier to deal with.

The changes this component makes are bunch of really trivial modifications to ease the writing experience and to make documenting components/themes a bit easier (which I do a lot). It doesn't change anything about the page visually for the reader — the changes are for the writer.

I wouldn't expect translations of articles that use this component to also use this component, unless the translator likes it and would want to use it anyway.

This component probably won't conflict with other components or themes, and even if it does, it probably won't matter too much.

Usage

On any wiki:

[[include :scp-wiki:component:croqstyle]]

This component is designed to be used on other components. When using on another component, be sure to add this inside the component's [[iftags]] block, so that users of your component are not forced into also using Croqstyle.

Related components

Other personal styling components (which change just a couple things):

• RSO Component — Rounderhouse

Personal styling themes (which are visual overhauls):

• Magnus Web Format — DrMagnus
• Flopstyle CSS — Lt Flops
• Blankstyle CSS — HarryBlank
• Placestyle CSS — Placeholder McD
• Jakstyle — JakdragonX

CSS changes

Reasonably-sized footnotes

Stops footnotes from being a million miles wide, so that you can actually read them.

.hovertip { max-width: 400px; }

Monospace edit/code

Makes the edit textbox monospace, and also changes all monospace text to Fira Code, the obviously superior monospace font.

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

Teletype backgrounds

Adds a light grey background to <tt> elements ({{text}}), so code snippets stand out more.

tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

No more bigfaces

Stops big pictures from appearing when you hover over someone's avatar image, because they're stupid and really annoying and you can just click on them if you want to see the big version.

.avatar-hover { display: none !important; }

Breaky breaky

Any text inside a div with class nobreak has line-wrapping happen between every letter.

.nobreak { word-break: break-all; }

Code colours

Add my terminal's code colours as variables. Maybe I'll change this to a more common terminal theme like Monokai or something at some point, but for now it's just my personal theme, which is derived from Tomorrow Night Eighties.

Also, adding the .terminal class to a fake code block as [[div class="code terminal"]] gives it a sort of pseudo-terminal look with a dark background. Doesn't work with [[code]], because Wikidot inserts a bunch of syntax highlighting that you can't change yourself without a bunch of CSS. Use it for non-[[code]] code snippets only.

Quick tool to colourise a 'standard' Wikidot component usage example with the above vars: link

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
}
 
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;
}

Debug mode

Draw lines around anything inside .debug-mode. The colour of the lines is red but defers to CSS variable --debug-colour.

You can also add div.debug-info.over and div.debug-info.under inside an element to annotate the debug boxes — though you'll need to make sure to leave enough vertical space that the annotation doesn't overlap the thing above or below it.

…like this!

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
}
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }

アイテム番号: SCP-798-JP

オブジェクトクラス: Safe/Gödel¹ Pending

特別収容プロトコル:

説明: SCP-798-JPは適切な文章を与えられる事でそれに対応する画像(以下、SCP-798-JP-A)を僅か数秒で生成することができる機械学習モデルを搭載したソフトウェア・アプリケーションです。MLP-mixer²ベースの潜在拡散モデル³、及び財団には解明されたものの現代社会の技術では解明不可能な程難解である複数のアルゴリズムにより構成されています。

SCP-798-JP-AはSCP-798-JPによって生成された画像の総称です。SCP-798-JP-Aは数学的・幾何学的には単なる"与えられた文章と同等の文字列が記述された画像"であり、AICや簡易的な機械学習モデルにも文字列として認識されるものの、人間の目には閲覧した媒体を問わず常に与えられた文章に関連する何らかの意味を持つ絵画・写真として写ります。この現象は記憶処理剤で無力化することが可能です。SCP-798-JP-Aのそれ以外の異常性・脅威性は現在判明していません。

SCP-798-JPは2018/09/05、ソースコード共有サイト"Github"上に公開されていたところを休暇中の研究員に偶然発見され、非公式に行われた数回の実験の結果異常性が判明したため収容されたものです。Github上のデータは削除され、公開者のアカウントは利用規約違反を装って停止されましたが、既にネット上に流通していたSCP-798-JP-A個体も削除されましたが、その脅威の低さや外見上の非異質性から発見者個人に対するカバーストーリーの適応は行われませんでした。

補遺1: 実験記録

実験記録798-JP.01

対象: ██研究員, clipper.aic

入力した文字列: "サングラスをかけた笑顔の男性"

結果: ██研究員はSCP-798-JP-A-01を"あまりにも写実的だ"、"プログラムが描いたとは思えない"と称賛したが、clipper.aicは"サングラスをかけた笑顔の男性"という文字列として認識し、特に主観的な意見は述べなかった。

実験記録798-JP.02

対象: ██研究員, ███研究員, clipper.aic

入力した文字列: "棒人間の漫画"

結果:

補遺2:

Footnotes

1. アイテムは異常科学を用いることで非異常であると説明可能です。

2. Ilya T., Neil H., Alexander K., et al. (2021). MLP-Mixer: An all-MLP Architecture for Vision. arXiv preprint arXiv:2105.01601

3. Omri A., Ohad F., Dani L. (2022). Blended Latent Diffusion. arXiv preprint arXiv:2206.02779